react中父组件state改变，子组件刷新

1.在react项目开发中，难免会遇到在父组件中state之改变，子组件也会有数据改变，

如果对react有一定了解，都知道react中的有props和state

• props：从组件外传到组件内的值，只能读取，不能修改
• state：是组件内置对象，可以修改其属性值，并且是动态修改，组件会根据state的值变化而刷新组件变化的部分.

 

　　因此问题出现了，现在的使用场景是在父组件中state改变了，父组件的实现局部刷新，子组件却没有丝毫改变，这种情况

就是父组件render初始化的时候子组件子组件也初始化，父组件中state改变，父组件实现刷新，父组件传入子组件中的props

也改变了，但是子组件中的state值并没有改变，所以子组件并没有刷新。

 

　　问题找到了，问题就好解决了，在这里react在组件中提供了一个监听props改变的方法 componentWillReceiveProps(nextProps: IProps) {}

，也就是props改变，这个方法就会执行一次, nextProps  就是父组件中传来的参数，我们可以把我们需要动态改变的数据赋值到state对象中，

这样就可以props改变了。componentWillReceiveProps(nextProps: IProps) {} 立刻监听到，后把state中的值修改，state修改后组件也会随之刷新

 

2.下面是测试代码

1. 父组件中的代码

   <Header
             back={'商品列表'}
             backArrow={true}
             children="上传商品"
             rightClick={this.save}
             right={
               this.state.updateState === updateState.update
                 ? '保存'
                 : this.state.updateState === updateState.info && this.state.isEdit
                   ? '编辑'
                   : ''
             }
           />

    

   　　

2. 子组件中的代码

     componentWillReceiveProps(nextProps: IProps) {
       console.log('进来了', nextProps.right)
   
       this.setState({
         right: nextProps.right
       })
     }

    

3. 注意事项，在class子组件中需要动态改变的数据需要把state中的值放到放入到render（）中

由于研究react框架不久，有许多不足之处，如有大佬路过，希望留言指正一下，谢谢