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

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

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

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

constructor(props):

示例：

jsx 复制代码

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

static getDerivedStateFromProps(nextProps, prevState):
- 在渲染之前调用，可以根据 props 更新 state。
- 返回一个对象以更新 state，或者返回 null 表示不更新。
- 示例：
  jsx 复制代码
```
static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null;
}
```
render():
- 必须实现的方法，返回要渲染的元素。
- 示例：
  jsx 复制代码
```
render() {
  return <h1>{this.state.count}</h1>;
}
```
componentDidMount():
- 组件挂载后立即调用，可以进行网络请求或添加订阅等操作。
- 示例：
  jsx 复制代码
```
componentDidMount() {
  fetchData().then(data => this.setState({ data }));
}
```

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

static getDerivedStateFromProps(nextProps, prevState):
- 同上，在组件更新前被调用。
shouldComponentUpdate(nextProps, nextState):
- 返回一个布尔值，决定组件是否重新渲染。用于优化性能。
- 示例：
  jsx 复制代码
```
shouldComponentUpdate(nextProps, nextState) {
  return nextProps.value !== this.props.value;
}
```
render():
- 同上，返回要渲染的元素。
getSnapshotBeforeUpdate(prevProps, prevState):
- 在最近一次渲染输出（提交）到 DOM 之前调用，可以捕获一些信息（如滚动位置），并将其返回给 componentDidUpdate。
- 示例：
  jsx 复制代码
```
getSnapshotBeforeUpdate(prevProps, prevState) {
  return this.listRef.scrollTop;
}
```
componentDidUpdate(prevProps, prevState, snapshot):
- 组件更新后调用，可以用来处理副作用，例如根据更新后的 props 发送网络请求。
- 示例：
  jsx 复制代码
```
componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.props.value !== prevProps.value) {
    // 处理更新
  }
}
```

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

componentWillUnmount() :
- 用于清理，比如取消订阅、清除定时器等。
- 示例：
  jsx 复制代码
```
componentWillUnmount() {
  clearTimeout(this.timer);
}
```

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

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

示例：

jsx 复制代码

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

示例：

jsx 复制代码

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

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

您好，我是肥晨。

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