技术学习笔记

Appearance

React 学习笔记 ​

React 是 Facebook 推出的用于构建用户界面的 JavaScript 库。

核心概念 ​

JSX ​

JSX 是 JavaScript 的语法扩展，看起来类似 HTML：

jsx
function Hello() {
  return <h1>Hello, World!</h1>;
}

组件 ​

函数组件：

jsx
function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

类组件：

jsx
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

Hooks ​

useState ​

jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useEffect ​

jsx
import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []); // 空依赖数组表示仅在挂载时执行

  return <div>{data}</div>;
}

状态管理 ​

  • useContext: 跨组件共享状态
  • Redux: 全局状态管理
  • Zustand: 轻量级状态管理

性能优化 ​

  1. 使用 React.memo 缓存组件
  2. 使用 useCallback / useMemo 缓存函数和计算结果
  3. 合理使用虚拟列表
  4. 代码分割与懒加载

相关资源 ​