React 组件生命周期与 Hooks 简明指南

好的，我们来详细讲解一下 React 类组件的生命周期方法和函数组件中的钩子（hooks）。

一、类组件的生命周期方法

React 类组件有几个重要的生命周期方法，这些方法可以让开发者在组件的不同阶段执行特定的代码。生命周期分为三个主要阶段：挂载、更新和卸载。

1. 挂载阶段

在组件创建并插入 DOM 中时，会依次调用以下方法：

• constructor(props):

  • 构造函数，用于初始化状态和绑定事件处理方法。
  • 示例：

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

• static getDerivedStateFromProps(nextProps, prevState):

  • 在渲染之前调用，可以根据 props 更新 state。
  • 返回一个对象以更新 state，或者返回 null 表示不更新。
  • 示例：

    static getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.value !== prevState.value) {
        return { value: nextProps.value };
      }
      return null;
    }
    

• render():

  • 必须实现的方法，返回要渲染的元素。
  • 示例：

    render() {
      return <h1>{this.state.count}</h1>;
    }
    

• componentDidMount():

  • 组件挂载后立即调用，可以进行网络请求或添加订阅等操作。
  • 示例：

    componentDidMount() {
      fetchData().then(data => this.setState({ data }));
    }
    

2. 更新阶段

当组件的 state 或 props 发生变化时，会触发更新，调用以下方法：

• static getDerivedStateFromProps(nextProps, prevState):

  • 同上，在组件更新前被调用。

• shouldComponentUpdate(nextProps, nextState):

  • 返回一个布尔值，决定组件是否重新渲染。用于优化性能。
  • 示例：

    shouldComponentUpdate(nextProps, nextState) {
      return nextProps.value !== this.props.value;
    }
    

• render():

  • 同上，返回要渲染的元素。

• getSnapshotBeforeUpdate(prevProps, prevState):

  • 在最近一次渲染输出（提交）到 DOM 之前调用，可以捕获一些信息（如滚动位置），并将其返回给 componentDidUpdate。
  • 示例：

    getSnapshotBeforeUpdate(prevProps, prevState) {
      return this.listRef.scrollTop;
    }
    

• componentDidUpdate(prevProps, prevState, snapshot):

  • 组件更新后调用，可以用来处理副作用，例如根据更新后的 props 发送网络请求。
  • 示例：

    componentDidUpdate(prevProps, prevState, snapshot) {
      if (this.props.value !== prevProps.value) {
        // 处理更新
      }
    }
    

3. 卸载阶段

当组件从 DOM 中移除时，调用以下方法：

• componentWillUnmount():
  • 用于清理，比如取消订阅、清除定时器等。
  • 示例：

    componentWillUnmount() {
      clearTimeout(this.timer);
    }
    

二、函数组件中的 Hooks

React 16.8 引入了 Hooks，使得函数组件也能拥有类组件的状态和生命周期功能。

1. useState

• 用于在函数组件中添加状态。
• 示例：

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

2. useEffect

• 用于处理副作用，相当于类组件中的 componentDidMount, componentDidUpdate 和 componentWillUnmount。
• 示例：

  useEffect(() => {
    // 组件挂载或更新时执行
    return () => {
      // 组件卸载时执行
    };
  }, [dependencies]); // 依赖数组，变化时重新执行 effect
  

3. useContext

• 用于在函数组件中访问 React 上下文。
• 示例：

  const value = useContext(MyContext);
  

4. useReducer

• 用于管理复杂状态逻辑，类似于 Redux 的 reducer。
• 示例：

  const [state, dispatch] = useReducer(reducer, initialState);
  

结论

React 的生命周期方法和 Hooks 使得组件能够在不同阶段执行特定操作。类组件通过生命周期方法管理状态和副作用，而函数组件通过 Hooks 提供了更简洁的方式来处理状态和副作用。掌握这些概念可以帮助开发者更高效地构建和维护 React 应用。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。