State&Props简单页面的创建流程

拿到一个模拟页面

根据原型图分析json接口（一般json接口返回数据格式会给定）

 

step1 把UI划分出组件层级

单一功能原则。理想状态下一个组件只做一件事。

 

step2 用React创建一个静态版本

传入数据模型，渲染UI但不交互。需要创建能够复用其他组件的组件，并通过props来传递数据。

props是一种从父级向子级传递数据的方法。（对外接口，只读）

state不在静态中使用，用在数据交互里。是组件内部的状态，this.state设置初始化状态，this.setState是更改组件状态的唯一方法。（对内接口，可在内部修改）

得到一个用于呈现数据模型的可重用组件库。这些组件只会有 render()方法，因为这只是你的应用的静态版本。层级最高的组件(FilterableProductTable)会把数据模型作为 prop 传入。如果你改变你的基础数据模型并且再次调用 ReactDOM.render()， UI 会更新。很容易看到你的 UI 是如何更新的，哪里进行了更新。因为没有什么复杂的事情发生。React 的单向数据流(也叫作单向绑定)保证了一切是模块化并且是快速的。

 

step3 定义UI状态的最小（但完整）表示

找state三条铁律：

  1、是不是通过props从父级穿过来的，如果是，则可能不是state

  2、随着时间推移如果不变，可能不是state

  3、能够根据组件中任何其他的state或者props计算出，可能不是state

 

step4 确定state应该位于哪里

对你应用的每一个 state：

* 确定每一个需要这个 state 来渲染的组件。

* 找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件)

* 这个公共所有者组件或另一个层级更高的组件应该拥有这个 state。

* 如果你没有找到可以拥有这个 state 的组件，创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。

 

step5 添加反向数据流

这里可分为父子组件的反向通信或兄弟组件的反向通信

详情参考这篇文章：https://blog.youkuaiyun.com/qq_41800210/article/details/90597955