REACT 从⼊入⻔门到实践组件开发

主要内容

• 参考 Thinking in React 开发 Filter Table

• 拆分组件的规则

• props 和 state 的最佳实践

• 单向数据流是如何构建的

Filter Table

• 具有搜索功能的产品表格⻚页

• 设计稿和接⼝口⽂文档已经给出

• 需要实现的效果

Filter Table

第⼀一步：按层级拆分组件

• 单⼀一职责原则

• UI 和组件层级对应

第⼆二步：开发静态版本

• 不⽤用 state，只⽤用 props

• 数据放在最顶层的组件中

• 构建应⽤用的顺序

第⼆二步：开发静态版本

第⼆二步：开发静态版本

第⼆二步：开发静态版本

第⼆二步：开发静态版本

第⼆二步：开发静态版本

第⼆二步：开发静态版本

第三步：分析需要的最少量（但是完备）state

• 状态越少越好维护

• ⽐比如 TodoList 显⽰示总条数

第三步：分析需要的最少量（但是完备）state

• 原始产品数组

• ⽤用户输⼊入的关键字

• 复选框的状态

• 过滤之后的产品数组

第三步：分析需要的最少量（但是完备）state

• 它是从⽗父级传过来的吗？

• 它会经常改变吗？

• 它能通过其他 `state` 和 `props` 计算出来吗？

第三步：分析需要的最少量（但是完备）state

• 如果它是从⽗父级传过来的，那么它就不是⼀一个 state

• 如果它会经常改变，那么它应该是⼀一个 state

• 如果它能通过其他 state 和 props 计算出来，那么它不是⼀一个 state

• 原始 products 列表

• ⽤用户输⼊入的搜索词

• 复选框的值

• 过滤后的 products 列表

第三步：分析需要的最少量（但是完备）state

第四步：分析 state 应该属于哪个组件

• 最具有挑战性的⼀一步

第四步：分析 state 应该属于哪个组件

• 找到所有需要⽤用到这个 state 的组件

• 找到他们的公共祖先组件

• 此组件或者它的祖先组件应该拥有这个 state

• 如果找不到合适的，可以创建⼀一个新的组件，它包含了所有⽤用到这个 state 的组件

第四步：分析 state 应该属于哪个组件

• FilterableProductTable 需要⽤用到 state 来展⽰示过滤后的产品

• SearchBar 需要⽤用到 state 来展⽰示搜索内容和复选框状态

• 它们的共同祖先组件是 FilterableProductTable

第四步：分析 state 应该属于哪个组件

第四步：分析 state 应该属于哪个组件

第四步：分析 state 应该属于哪个组件

第四步：分析 state 应该属于哪个组件

第五步：构建反向数据流

• 将搜索框和复选框的改变通知给 FilterableProductTable

• ⼦子组件 -> ⽗父组件 -> ⼦子组件

第五步：构建反向数据流

第五步：构建反向数据流

总结

• 按层级划分组件

• state 最好尽可能少（但是需要完备）

• 理解单向数据流的含义，以及如何应⽤用