React学习(四)实现组件关注分离

Container-Component模式

在开发中,可能会经常遇到两个页面或者区域展示的文档结构和样式是相同的,但数据源和交互不同。该情况下如何左到最大化的功能复用呢?——将展示部分抽离,数据和交互部分分开

  • Container:容器组件,主要负责数据的获取,业务相关的交互等内容。容器组件可以由其他组件或展示组件组合而成,将数据通过Props传给其他展示组件执行,通常不会直接操作DOM和定义样式
  • Component:展示组件,只单纯负责将获取的Props传来的数据进行展示,可以操作DOM和定义样式。通常Props是数据的唯一来源,涉及到业务的事件和交互都通过回调通知给父级组件进行处理。

继续我们前面的CommentApp项目,我们将修改项目结构,将容器和组件拆分开来

无状态组件(Stateless Functional Components)

无状态组件只是根据Props传递的数据进行渲染,并没有依赖生命周期函数做一些复杂的状态处理或对DOM节点的操作。此时,可以考虑使用无状态组件。无状态组件可以看成一个纯函数,不会被实例化,没有生命周期,也不可以用this.refthis.state

高阶组件(Higher Order Components)

可以通过一个高阶函数实现对一个函数的包装和扩展

参考资料

《移动Web常用开发方式实战》


 上一篇
图表中使用三元组构建树及其反过程的算法 图表中使用三元组构建树及其反过程的算法
题目一假设数据结构如下: var data = [ { parentId: 0, id: 1, value: '1' }, { parentId: 3, id: 2, value: '2' }
2019-03-02
下一篇 
React与Vue有什么异同 React与Vue有什么异同
相似之处React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交
2019-02-20
  目录