React中的state提升

解决的问题:

当需要对多个子组件的数据进行管理或者要使自组件之间进行通信时,惯有的思维会是使各子组件维护各自的state,并通过获取子组件数据来达到目的,但这种做法会使代码难以理解和重构。

解决办法:

提升state,将各子组件的state存储在父组件中进行维护,父组件通过props把state传回子组件,使得子组件与父组件同步,并进行渲染等操作。
当需要修改父组件中的state时,由于组件state被认为是私有的,所以子组件不能直接进行修改,而是将事件函数通过props传递给子组件,子组件通过触发事件,调用父组件中定义的处理函数,进而改变父组件state的值。
当父组件state改变,会触发包括子组件在内的自动重新渲染。

总结:

子组件不再保持自己的state,而是由父组件进行维护,从父组件中接受值,并通过触发事件通知父组件。

你可能感兴趣的:(React中的state提升)