功能组件的componentWillReceiveProps

简介

在React中，当组件的props发生变化时，会调用componentWillReceiveProps生命周期钩子函数，该函数会传入一个新的props对象进行处理，允许我们在组件接收到新的props时进行一些状态更新或其他操作。

语法

componentWillReceiveProps(nextProps) {
   // 对传入的新props进行处理
}

注意事项

1. 该生命周期钩子函数仅在props发生变化时被调用，如果props没有变化，则不会被调用。
2. 在该函数中执行setState，会导致组件重新渲染，因此需要谨慎使用。
3. 在React v17.0以后，该函数被标记为不推荐使用，建议使用新的函数getDerivedStateFromProps取代该函数。
4. 该函数的 nextProps 参数包含了新的props，需要使用该参数进行新props的处理。

示例

import React from 'react';

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

  // 当组件接收到新的props时，更新state的name属性
  componentWillReceiveProps(nextProps) {
    if (nextProps.name !== this.props.name) {
      this.setState({ name: nextProps.name });
    }
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}</h1>
      </div>
    );
  }
}

export default MyComponent;

在上述示例中，组件会根据接收的新props更新状态中的name属性，从而更新组件渲染结果，展示最新的props。