React之智能组件和木偶组件

Z时代
2024-01-10
分类：综合

react

智能组件 VS 木偶组件

在 React + Redux 结合作为前端框架的时候，提出了一个将组件分为“智能”和“木偶”两种

智能组件：它是数据的所有者，它拥有数据、且拥有操作数据的action，但是它不实现任何具体功能。它会将数据和操作action传递给子组件，让子组件来完成UI或者功能。这就是智能组件，也就是项目中的各个页面。

木偶组件：它就是一个工具，不拥有任何数据、及操作数据的action，给它什么数据它就显示什么数据，给它什么方法，它就调用什么方法，比较傻。这就是木偶组件，即项目中的各个组件。

因此，数据在page层获取、数据的操作和处理在page层定义，组件就是傻傻的知道执行和显示就行了，各操各的心。这种设计也整好符合目前无论是Vue、augular还是React提倡的基于数据驱动的设计理念——程序定义好Model和View的关系，剩下的业余处理只需要关心数据变化，View的变化由框架自动执行，无需像jquery时代再去手动操作DOM。

数据管理

下面看一下数据在系统中是如何传递的。这里的数据分为两种：

第一种可以称之为“系统数据”，和业务无关的，一般任何系统中都会有。例如用户id、用户头像、配置信息等，这个的特点就是符合单例模式，全局共用一套

第二种可以称之为“业务数据”，每个页面都可能不一样。如在娱乐频道需要的是娱乐新闻列表，而到了军事频道就需要军事新闻的列表了，再到新闻详情页就需要新闻的内容了

针对这两种不同的数据，当然要分开处理。针对第一种“系统数据”，系统一初始化就立即获取，然后交给Redux做管理，这也符合Redux的特点。而针对第二种“业务数据”，那就什么时候用，就什么时候获取。

代码架构（物理）

使用React + Redux设计代码结构，目前方式都比较统一，基本都是按照以下方式来设计，这些在github等社区都能找到相似的结构。

app // 业务代码目录，或者叫 src --actions // 定义 Redux 的各个 action --components // 定义项目中的各个组件，里面可能有很多个子文件夹 --config // 项目配置，无具体规定，自由发挥 --constants // 定义 Redux 中用到的各个常量 --container // 定义项目中的所有的页面 --fetch // 定义项目中所有数据获取、提交的方法 --reducers // 定义 Redux 的 reducer 规则 --router // 定义项目中的 router 规则 --store // 定义 Redux 的全局 store 对象 --util // 工具函数，例如时间格式的处理等 `--index.jsx // 入口，被 ../index.html 引用 resource // 静态资源目录，或者叫 static mocha // 测试用例，一般叫 test ，但是使用 fis3 时候 test 文件夹有其他用处，不得不换个名字 .eslintignore .eslintrc.json .gitignore fis-conf.js index.html package.json

README.md

以上目录中，app/components和app/container是开发中修改最多的目录。app/container里面定义的都是页面，即智能组件，只关心数据，功能比较单一，因此结构也比较简单

app/container list index.jsx Home.jsx Baijia.jsx detail detail.jsx

imgDetail.jsx

但是针对组件app/components来说，要显示样式，当然就需要css和图片，文件类型比较多。因此，要按照如下方式定义组件

app/components LoadMore img icon.png index.jsx style.less BannerAd img close.png index.jsx

style.less

即，用一个文件夹来表示单个组件，里面的index.jsx是业务和模板代码，style.less是样式，img/文件夹放图片文件。这样的话，可以把每个组件都作为一个整体来管理，而且引用的时候也比较方便，例如import LoadMore from '../../app/components/LoadMore'就可以了——目录名即组件的名字。

使用React重构百度新闻webapp前端 https://www.imooc.com/article/12433

————————————————————————————————————————————————————————————————————————

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

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

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

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

// CommentList.js
class CommentList extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return <ul> {this.state.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

可用性：CommentList不可以复用

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

那么来看下分离的情况：

// CommentListContainer.js
class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return <CommentList comments={this.state.comments} />;
  }
}
// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() { 
    return <ul> {this.props.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

这样就做到了数据提取和渲染分离，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 之容器组件和展示组件相分离解密 https://segmentfault.com/a/1190000006845396

智能组件和木偶组件（也有叫容器组件和UI组件的）。见名知意，智能组件就要做一些比较智能比较‘高端’的工作，智能组件负责逻辑处理、数据获取等比较‘智能’的工作；
而木偶组件就比较‘呆板’，它原则上只负责展示功能，像一只木偶，别人（智能组件）用线牵着它来控制它的展示内容。

来看一个例子：

class ListUI extends React.Component{
    render(){
        let data = this.props.data;
        return (
            <ul>
                {data.map(item => <li key={item.id} >{item.text}</li>)}
            </ul>
        )
    }
}
class List extends React.Component{
    constructor(){
        super();
        this.getData = this.getData.bind(this);
    }
    render(){
        let data = this.getData();
        return <ListUI data={data} />
    }
    getData(){
        return [{id : 1,text : 'hello'},{id : 2,text : 'world'}];
    }}

本例中组件List（智能组件）负责获取数据（getData），实际开发中会比这复杂的多，涉及到调用接口获取数据，数据的处理等等，本例侧重说明概念，具体的就不再赘述。
而组件ListUI（木偶组件）则只负责数据的展示，傻瓜式的别人给他什么他就展示什么。

这是react开发中很重要的一个概念，这种解构分工明确，解构清晰，方便维护和扩展。实属react开发必备之技能。

本例中还有一点值得注意：
构造函数中的绑定this 实际开发中会在一个组件中定义很多方法，这些方法中可能会有回调函数，这就会导致this指向的问题（当然ES6中的箭头函数能规避这个问题，也推荐只用ES6的写法）
但是也不排除有ES5的写法存在，所以需要我们绑定this，这里强烈推荐在构造函数中统一的绑定this，这样哪些方法绑定了this就一目了然也便于维护。

基于这个概念做一些扩展。
事件处理: 有了以上概念的基础，现给组件添加一个点击事件，目的是点击li时弹出当前li的文本内容。根据以上的概念，要把逻辑处理的方法写在智能组件中，然后把方法作为一个prop传递给木偶组件，最后在木偶组件中添加点击事件来调用传过来的方法。
代码如下：

class ListUI extends React.Component{
    constructor(){
        super();
        this.clickHandler = this.clickHandler.bind(this);
    }
    render(){
        let data = this.props.data;
        return (
            <ul>
                {data.map(item => <li key={item.id} onClick={this.clickHandler}>{item.text}</li>)}
            </ul>
        )
    }
    clickHandler(e){
        this.props.clickHandler(e);
    }
}
class List extends React.Component{
    constructor(){
        super();
        this.getData = this.getData.bind(this);
        this.clickHandler = this.clickHandler.bind(this);
    }
    render(){
        let data = this.getData();
        return <ListUI data={data} click={this.clickHandler}/>
    }
    getData(){
        return [{id : 1,text : 'hello'},{id : 2,text : 'world'}];
    }
    clickHandler(e){
        let ele = e.currentTarget || e.srcElement;
        alert(ele.innerHTML);
    }}