react 组件构建设计

项目设计中,可以从顶层React元素开始,然后实现它的子组件自顶向下来构建组件的层级

组件的写法:

1.引入依赖模块

2.定义React组件

3.作为模块导出React组件

4.子组件更新父组件的机制

5.父组件传递一个回调函数作为子组件的属性。

每当子组件想要更新父组件的state时,它就会调用这个回调函数并传递必要的数据到父组件的新状态中

父组件更新它的state,触发render()函数重新渲染所有有必要更新的子组件;

React单向数据流绑定,父组件通过getInitialState设定默认数据,数据作为属性传递给子组件,子组件再通过回调函数,通过访问state更新父组件的数据。这种数据流单向流动的模式,有助于增加组件的数量,而不增加页面的复杂度;但是这种数据流的层层传递会浪费很多冗余的数据,但是容易调试。要优化这种方案有很多,Flux就是其中的一种。