每次收到 props 时 componentWillRecieveProps 都会运行吗

IT技术 html reactjs
2021-04-25 18:59:50

我正在阅读 React facebook 的文档,那里写着

当组件接收新的 props 时调用。初始渲染不会调用此方法。

但是在链接的后面,已解释即使props相同,也会调用此方法,因为props可以是引用,并且这些引用处的数据可能不同。

所以,我的问题是是否每次我们收到新props时都会调用它。

2个回答

初始渲染意味着当您的组件第一次使用它拥有的任何数据加载时。例如:

Parent
    constructor() {
            super();
            this.state = {
                viewData:undefined,
            };
    componentDidMount(){
      let myData = yourStore.getData();
      this.setState({viewData:myData})
    }
    updateView(){
     let myData = yourStore.getData();
      this.setState({viewData:myData})
    }


render() 
   {
    return(
      <div>
         {
      this.state.viewData && this.state.viewData.map(function (obj, index) {
        return <childComponenet data={obj} key={index}/>
       })
        }       
      </div>
     <button onClick={this.updateView.bind(this)>Update</button>}
     )
}

子组件:

constructor() {
        super();
        this.state = {
            childData:this.props.data
            }
        };

//componentDidMount(){
  //this.setState({childData:this.props.data}) }

componentWillReceiveProps(newProps){
   this.setState({childData:newProps.data})//this method will not get called first time
}

render(){
   return(
   <span>{this.state.childData}</span>
   )
}

构造函数只初始化一次。所以当第一次渲染子组件时,它会设置state变量。现在,当您单击父组件中的更新状态时state,它会更新并将更新的stateas传递props给子组件。在这种情况下,componentWillReceiveProps方法将被调用并更新子组件状态。

注意:componentWillReceiveProps不检查 props 的内部值。这意味着即使以前和当前的props相同,它也会起作用。因此答案是肯定的当它从父级收到新的props时,它每次都会被调用。

正如布兰登在评论中所建议的那样:

是的。每次组件收到可能的新props时,它都会被调用。它不会在初始渲染时被调用