React 入门：组件化编码流程（一）拆分组件

组件化编码流程“三步走”

通常，组件化编程流程需要经历以下三个步骤。
当然还要根据实际项目工作情况而定，但是思路是这样的。

一、拆分组件

根据 UI 效果图，拆分界面上的功能模块，并抽取组件。

下面是一个 TodoList 的界面效果如下：

经过分析上面 TodoList 界面效果，组件拆分情况如下：

二、实现静态组件

根据组件结构，构建组件代码，实现静态页面效果。编码实现上需要注意 className、style 的写法。

根据拆分组件的结果，抽取出了 4 个组件，层级结构如下图所示：

根据上面的组件结构，构建的代码结构如下：

后续章节会逐个实现代码细节。

三、实现动态组件

• 动态显示初始化数据

  • 数据类型限制
  • 如何确定将数据放在哪个组件的 state 中？
    • 只有某个组件自己使用的数据，则放在其自身的 state 中；
    • 如果是某些组件公用的数据，则放在他们共同的父组件的 state 中（官方称此操作为：状态提升）。

• 交互

  • 关于父子组件之间的通信

    • 【父组件】给【子组件】传递数据：通过 props 传递；
    • 【子组件】给【父组件】传递数据：通过 props 传递，要求父组件提前给子组件传递一个方法。

  • 通过绑定事件监听处理

后续通过多个章节来完全编码实现上文提到的 TodoList 案例。