javascript - 传递 Props 后的 ReactJS ComponentWillMount()

Question

我想问为什么子组件( ComponentWillMount() )只渲染一次，每次我在 onClick 上向它传递 props 时。

一旦我单击某个将 Prop 传递给子项的按钮，子项的 ComponentWillMount() 就不会再次触发，仅在第一次单击时触发。

父组件:

render(){
return(
                <div>
                    <AppModuleForm 
                    editID = {this.state.editID}
                    editURL = {this.state.editURL}
                    editConf = {this.state.editConf}
                    editDesc = {this.state.editDesc}
                    editIcon = {this.state.editIcon}
                    editParent = {this.state.editParent}
                    editOrder= {this.state.editOrder}
                    status={this.state.status} 
                    moduleList={this.state.moduleList}  
                    updateAppModuleTree={this.updateAppModuleTree.bind(this)}/>
                </div>
)
}

子组件:

constructor(props){
        super(props)
        console.log(this.props.editDesc)
        this.state={
            url:'',
            description:'',
            parentID:'',
            order:'',
            configuration:'',
            icon:'',
            parentIDList:[],
            urlDuplicate: false,
            isSuccess: false,
            errorMessage: '',
        }

    }

    componentWillMount(){
        if(this.props.status==='edit'){
            let {
                editURL,
                editDesc,
                editParent,
                editConf,
                editIcon,
                editOrder} = this.props

            this.setState({
                url:editURL,
                description:editDesc,
                parentID:editParent,
                order:editOrder,
                configuration:editConf,
                icon:editIcon,
            })
        }
    }

Answer 1

 componentWillReceiveProps(nextProps){
   if(nextProps.status != this.props.status){
        if(this.props.status==='edit'){
            let {
                editURL,
                editDesc,
                editParent,
                editConf,
                editIcon,
                editOrder} = this.props

            this.setState({
                url:editURL,
                description:editDesc,
                parentID:editParent,
                order:editOrder,
                configuration:editConf,
                icon:editIcon,
            })
        }
      }
    }

ComponentWillMount 是安装生命周期方法，该方法将在安装组件之前调用，因此可以在其中完成初始化，而一旦 props 更改，将调用 ComponentWillReceiveProps 并且您将得到nextProps 参数发生变化。