react 组件构建设计

Posted 2020-09-28 改变

项目设计中，可以从顶层React元素开始，然后实现它的子组件，自顶向下来构建组件的层级
组件的写法：
1.引入依赖模块
2.定义React组件
3.作为模块导出React组件
4.子组件更新父组件的机制
5.父组件传递一个回调函数作为子组件的属性。

每当子组件想要更新父组件的state时，它就会调用这个回调函数并传递必要的数据到父组件的新状态中
父组件更新它的state，触发render()函数重新渲染所有有必要更新的子组件；
React单向数据流绑定，父组件通过getInitialState设定默认数据，数据作为属性传递给子组件，子组件再通过回调函数，通过访问state更新父组件的数据。这种数据流单向流动的模式，有助于增加组件的数量，而不增加页面的复杂度；但是这种数据流的层层传递会浪费很多冗余的数据，但是容易调试。要优化这种方案有很多，Flux就是其中的一种。