基于 React 官方文档的速通核心笔记

以下是基于 React 官方文档的速通核心笔记，涵盖 核心概念、Hooks、生命周期 等关键知识点，并附示例代码：

---

一、React 核心概念

1. 组件类型

• 函数组件（推荐）：

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }
  

• 类组件（旧版）：

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }
  

2. JSX 语法

• 在 JS 中直接写 HTML 结构：

  const element = <div className="app">Hello React</div>;
  

• 嵌入表达式：

  const name = "Alice";
  const element = <h1>{name}</h1>;
  

3. 组件通信

• Props 传递数据（父 → 子）：

  function Parent() {
    return <Child name="Alice" />;
  }
  function Child(props) {
    return <div>{props.name}</div>;
  }
  

---

二、Hooks（函数组件核心）

1. useState：管理状态

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

2. useEffect：处理副作用

• 模拟生命周期：

  function Example() {
    useEffect(() => {
      // componentDidMount：初始化操作（如请求数据）
      console.log('Component mounted');
      return () => {
        // componentWillUnmount：清理操作（如取消订阅）
        console.log('Component unmounted');
      };
    }, []);
  
    useEffect(() => {
      // componentDidUpdate：依赖变化时触发
      console.log('State updated');
    }, [count]); // 依赖项为 count
  }
  

3. useContext：跨组件传递数据

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

4. useRef：访问 DOM 或保存可变值

function TextInput() {
  const inputRef = useRef(null);
  const focusInput = () => inputRef.current.focus();
  return <input ref={inputRef} />;
}

5. useMemo & useCallback：性能优化

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

---

三、类组件生命周期（旧版）

1. 挂载阶段：

• constructor() → render() → componentDidMount()

  class Example extends React.Component {
    componentDidMount() {
      // 初始化操作（如请求数据）
    }
  }
  

2. 更新阶段：

• shouldComponentUpdate() → render() → componentDidUpdate()

  class Example extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
      return nextProps.value !== this.props.value; // 决定是否更新
    }
  }
  

3. 卸载阶段：

• componentWillUnmount()：

  class Example extends React.Component {
    componentWillUnmount() {
      // 清理操作（如清除定时器）
    }
  }
  

---

四、事件处理

1. 绑定事件：

function Button() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Clicked');
  };
  return <button onClick={handleClick}>Click</button>;
}

2. 传递参数：

<button onClick={(e) => handleDelete(id, e)}>Delete</button>

---

五、条件渲染

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
      {isLoggedIn && <LogoutButton />}
    </div>
  );
}

---

六、列表渲染

function NumberList({ numbers }) {
  return (
    <ul>
      {numbers.map((num) => (
        <li key={num.id}>{num.value}</li>
      ))}
    </ul>
  );
}
// 注意：必须为每个列表项添加唯一的 `key`！

---

七、表单控制

1. 受控组件：

function Form() {
  const [value, setValue] = useState('');
  const handleChange = (e) => setValue(e.target.value);
  return <input value={value} onChange={handleChange} />;
}

2. 非受控组件（使用 useRef）：

function Form() {
  const inputRef = useRef(null);
  const handleSubmit = () => console.log(inputRef.current.value);
  return <input ref={inputRef} />;
}

---

八、组件设计模式

1. 组合 vs 继承：

• 组合（推荐）：

  function Parent() {
    return <Child><p>Slot Content</p></Child>;
  }
  function Child({ children }) {
    return <div>{children}</div>;
  }
  

---

九、性能优化

1. React.memo（函数组件）：

const MemoizedComponent = React.memo(function MyComponent(props) {
  // 仅当 props 变化时重新渲染
});

2. PureComponent（类组件）：

class MyComponent extends React.PureComponent {
  // 自动浅比较 props 和 state
}

---

十、核心规则总结

1. 单向数据流：数据通过 props 向下传递，事件向上传递。
2. 状态提升：多个组件共享状态时，提升到最近的共同父组件。
3. Hooks 规则：只在函数组件顶层调用，不能在条件或循环中使用。

---

通过掌握这些核心概念和示例，可快速上手 React 开发！建议结合官方文档实践练习。