Upload
xcat-liu
View
647
Download
2
Embed Size (px)
Citation preview
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 最好尽可能少(但是需要完备)
• 理解单向数据流的含义,以及如何应⽤用