React 之容器组件和展示组件相分离解密

前端之家收集整理的这篇文章主要介绍了React 之容器组件和展示组件相分离解密前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。

那么为什么需要容器组件和展示组件相分离呢?

这里有个基本原则:容器组件仅仅做数据提取,然后渲染对应的子组件,记住这个点,Trust me!

看下面这个展示列表的例子,不区分容器和展示组件的情况

  1. // CommentList.js
  2. class CommentList extends React.Component {
  3. constructor() {
  4. super();
  5. this.state = { comments: [] }
  6. }
  7. componentDidMount() {
  8. $.ajax({
  9. url: "/my-comments.json",dataType: 'json',success: function(comments) {
  10. this.setState({comments: comments});
  11. }.bind(this)
  12. });
  13. }
  14. render() {
  15. return <ul> {this.state.comments.map(renderComment)} </ul>;
  16. }
  17. renderComment({body,author}) {
  18. return <li>{body}—{author}</li>;
  19. }
  20. }
  • 可用性:CommentList不可以复用

  • 数据结构:组件应该对所需要的数据有所预期,但这里其实没有,PropTypes可以很好的做到这一点

那么来看下分离的情况:

  1. // CommentListContainer.js
  2. class CommentListContainer extends React.Component {
  3. constructor() {
  4. super();
  5. this.state = { comments: [] }
  6. }
  7. componentDidMount() {
  8. $.ajax({
  9. url: "/my-comments.json",success: function(comments) {
  10. this.setState({comments: comments});
  11. }.bind(this)
  12. });
  13. }
  14. render() {
  15. return <CommentList comments={this.state.comments} />;
  16. }
  17. }
  18.  
  19.  
  20. // CommentList.js
  21. class CommentList extends React.Component {
  22. constructor(props) {
  23. super(props);
  24. }
  25. render() {
  26. return <ul> {this.props.comments.map(renderComment)} </ul>;
  27. }
  28. renderComment({body,author}) {
  29. return <li>{body}—{author}</li>;
  30. }
  31. }

这样就做到了数据提取和渲染分离,CommentList可以复用,CommentList可以设置PropTypes判断数据的可用性

来看下容器组件和展示组件的区别:

展示组件 容器组件
关注事物的展示 关注事物如何工作
可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有DOM标签和css样式
常常允许通过this.props.children传递 提供数据和行为给容器组件或者展示组件
对第三方没有任何依赖,比如store 或者 flux action 调用flux action 并且提供他们的回调给展示组件
不要指定数据如何加载和变化 作为数据源,通常采用较高阶的组件,而不是自己写,比如React Redux的connect(),Relay的createContainer(),Flux Utils的Container.create()
仅通过属性获取数据和回调
很少有自己的状态,即使有,也是自己的UI状态
除非他们需要的自己的状态,生命周期,或性能优化才会被写为功能组件

优势:

  • 展示和容器更好的分离,更好的理解应用程序和UI

  • 重用性高,展示组件可以用于多个不同的state数据源

  • 展示组件就是你的调色板,可以把他们放到单独的页面,在不影响应用程序的情况下,让设计师调整UI

  • 迫使你分离标签,达到更高的可用性

猜你在找的React相关文章