简述state 和 props 触发更新的⽣命周期分别有什么区别？

八股文_React面试题 0 54

参考回答

在 React 中，state 和 props 都是用来控制组件数据的，但它们触发更新的生命周期有所不同：

State 更新触发更新的生命周期：
- 当 state 发生变化时，React 会重新渲染组件。
- componentDidUpdate 会在组件更新后调用，通常用于处理副作用。
- getSnapshotBeforeUpdate 在组件渲染后、更新前被调用，用于获取一些渲染前的快照。
Props 更新触发更新的生命周期：
- 当组件的 props 发生变化时，React 会重新渲染组件。
- 同样地，componentDidUpdate 也会在 props 更新后调用。
- shouldComponentUpdate 可以用来优化 prop 更新时的渲染，决定是否需要重新渲染组件。

详细讲解与拓展

State 更新的生命周期：
- 当 setState 被调用时，它会触发组件的重新渲染过程。React 会检查组件的 state 是否变化，如果有变化，则执行 render 方法重新渲染。
- componentDidUpdate 是 state 更新后被调用的生命周期方法。它通常用于执行与更新相关的副作用（例如发起 API 请求）。
例子：如果组件的 state 更新了，可以在 componentDidUpdate 中处理：
```
class MyComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = { count: 0 };
 }

 increment = () => {
   this.setState({ count: this.state.count + 1 });
 }

 componentDidUpdate(prevProps, prevState) {
   if (prevState.count !== this.state.count) {
     console.log("Count updated!");
   }
 }

 render() {
   return (
     <button onClick={this.increment}>{this.state.count}</button>
   );
 }
}
```
在 componentDidUpdate 中，我们通过比较前后的 state.count 来执行额外的操作。
Props 更新的生命周期：
- 当 props 更新时，React 会重新渲染组件。在组件接收到新的 props 后，shouldComponentUpdate 可以决定是否重新渲染，如果返回 false，则跳过渲染。
- componentDidUpdate 同样会在 props 更新后调用。与 state 更新时一样，可以在此方法中处理相关副作用。
例子：当 props 发生变化时，组件会触发更新：
```
class MyComponent extends React.Component {
 componentDidUpdate(prevProps) {
   if (prevProps.name !== this.props.name) {
     console.log("Props updated!");
   }
 }

 render() {
   return <div>{this.props.name}</div>;
 }
}
```
State 和 Props 更新的对比：
- 触发方式：state 更新是由 setState 引发的，而 props 更新是由父组件传递新值触发的。
- 性能优化：通过 shouldComponentUpdate 可以控制组件是否在 props 或 state 更新时重新渲染，从而进行性能优化。

总结

state 和 props 都是触发 React 组件更新的原因，但是它们的触发机制有所不同。state 更新通常是由组件内部的逻辑控制，而 props 更新则是由外部组件传递新的值。当 state 或 props 更新时，React 会触发组件的重新渲染，生命周期方法如 componentDidUpdate 可以用来处理更新后的副作用，shouldComponentUpdate 可以用来优化不必要的渲染。

参考回答

详细讲解与拓展

总结

发表评论 取消回复

发表评论取消回复