React 组件开发

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

2. 主要内容
• 参考 Thinking in React 开发 Filter Table
• 拆分组件的规则
• props 和 state 的最佳实践
• 单向数据流是如何构建的

3. Filter Table
• 具有搜索功能的产品表格⻚页
• 设计稿和接⼝口⽂文档已经给出

4. • 需要实现的效果
Filter Table

5. 第⼀一步：按层级拆分组件
• 单⼀一职责原则
• UI 和组件层级对应

6. 第⼆二步：开发静态版本
• 不⽤用 state，只⽤用 props
• 数据放在最顶层的组件中
• 构建应⽤用的顺序

7. 第⼆二步：开发静态版本

8. 第⼆二步：开发静态版本

9. 第⼆二步：开发静态版本

10. 第⼆二步：开发静态版本

11. 第⼆二步：开发静态版本

12. 第⼆二步：开发静态版本

13. 第三步：分析需要的最少量
（但是完备）state
• 状态越少越好维护
• ⽐比如 TodoList 显⽰示总条数

14. 第三步：分析需要的最少量
（但是完备）state
• 原始产品数组
• ⽤用户输⼊入的关键字
• 复选框的状态
• 过滤之后的产品数组

15. 第三步：分析需要的最少量
（但是完备）state
• 它是从⽗父级传过来的吗？
• 它会经常改变吗？
• 它能通过其他 `state` 和 `props` 计算出来吗？

16. 第三步：分析需要的最少量
（但是完备）state
• 如果它是从⽗父级传过来的，那么它就不是⼀一个
state
• 如果它会经常改变，那么它应该是⼀一个 state
• 如果它能通过其他 state 和 props 计算出来，那
么它不是⼀一个 state

17. • 原始 products 列表
• ⽤用户输⼊入的搜索词
• 复选框的值
• 过滤后的 products 列表
第三步：分析需要的最少量
（但是完备）state

18. 第四步：分析 state 应该属于哪个组件
• 最具有挑战性的⼀一步

19. 第四步：分析 state 应该属于哪个组件
• 找到所有需要⽤用到这个 state 的组件
• 找到他们的公共祖先组件
• 此组件或者它的祖先组件应该拥有这个 state
• 如果找不到合适的，可以创建⼀一个新的组件，它
包含了所有⽤用到这个 state 的组件

20. 第四步：分析 state 应该属于哪个组件
• FilterableProductTable 需要⽤用到 state 来展⽰示过
滤后的产品
• SearchBar 需要⽤用到 state 来展⽰示搜索内容和复选
框状态
• 它们的共同祖先组件是 FilterableProductTable

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

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

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

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

25. 第五步：构建反向数据流
• 将搜索框和复选框的改变通知给
FilterableProductTable
• ⼦子组件 -> ⽗父组件 -> ⼦子组件

26. 第五步：构建反向数据流

27. 第五步：构建反向数据流

28. 总结
• 按层级划分组件
• state 最好尽可能少（但是需要完备）
• 理解单向数据流的含义，以及如何应⽤用