如何用React的**进行开发（Thinking in React）

[nrz]

背景

在阅读了react入门文档之后，感觉Thinking in React这章很是精髓。主要讲的是构建一个React应用的思考过程。

整体说明

简单来说就是分为4步

1. 先把在设计稿上标出组件分割，并且命名好
2. 写静态的react代码，不包含任何交互
3. 找出这个页面的状态，并找到这些状态书写的位置, 这步是最难的
4. 补充上用户的交互，反向state设置，比如input的onChange之类

具体步骤说明

1. Break The UI Into A Component Hierarchy
在设计稿上用红线圈出组件，一般情况下可以基于设计师给的ps稿；有时候可以直接用设计师的命名；

每层都有自己唯一的功能，分出层级关系：

• FilterableProductTable：容器，包含所有组件
  • SearchBar：获取用户输入
  • ProductTable：展示列表
    • ProductCategoryRow：类别头
    • ProductRow：商品行

讨论
为什么Name-Price这行没有自成一个组件？其实这个是因人而异的，如果他够复杂了，可以提出来

2. Build A Static Version in React

优先写静态内容（就是那些不包含交互的）：

• 因为静态的一般要写很多代码但是思考很少，这个阶段state完全不要用！
• 交互代码不多，但是很需要思考，所以滞后

code here
3. Identify The Minimal (but complete) Representation Of UI State：

找到最小单位的state, 如何确定：

1. 列出所有数据
   • 商品列表productList
   • 搜索框内容searchTxt
   • 用户点击checkbox的值,checkboxValue
   • 过滤出的filterdProductList
2. 可以通过以下3条原则来确定是否为state:
   • 是否通过由父组件通过props传递给子组件（而state一般不是通过传递，而是直接定义一个变量，或者用状态管理器穿进来）？如果是，就不是state;
   • 是不是总是不变（应该是不会由用户进行改变）？ 不变的就不是state;
   • 是否能基于state或者props计算所得？如果是，就不是state;
     通过第一条排除productList，第三条排除filterdProductList，得出searchTxt和checkboxValue是state.

4. Identify Where Your State Should Live**：确定state应该放在哪里（这点是最难的）

1. 找出那些组件渲染时需要某些状态的组件
2. 找出上述组件的共用组件
3. 如果某个块有状态但是没在状态列表里找到，就要给这个块定义出组件，让他含有state

实际情况：

1. searchBar需要用户输入，ProductTable需要filter过滤
2. 他们共同的组件是FilterableProductTable，所以state放在这个组件里即可

code here
5. Add Inverse Data Flow

添加反向数据流，简单的说就是把用户的交互赋值到state上，code here

练习代码：https://github.com/jerryni/react-redux-practice

by jerryni