React之智能组件和木偶组件

智能组件和木偶组件（也有叫容器组件和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);}
}

最后想说的是：智能组件和木偶组件这种编程思想非常重要，开发大型项目时体现的尤为明显，当项目很大时更需要把木偶组件细分，不然代码会杂乱无章，非常的不便于阅读，及其的不利于维护和扩展，最后的结果是项目无法进行。

React之智能组件和木偶组件相关推荐

智能组件和木偶组件_木偶简介
智能组件和木偶组件 Puppeteer is a Node library that we can use to control a headless Chrome instance. We are ...
智能组件和木偶组件_一周前五篇文章：Linux，木偶和巨魔
智能组件和木偶组件每周,我都会统计数字并听取嗡嗡声,以在Opensource.com上为您带来上周最好的开源新闻和故事. 一周前五篇文章 #5. 为有4个友好木偶的孩子提供开源教育我采访了Hell ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
React子组件给父组件传值，父组件引用子组件并给子组件传值
本博客代码是 React 父组件和子组件相互传值的 demo:实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图:效果图如下: 父组件代码: 代码解析: ...
react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
onclick=两个函数_[译]React函数组件和类组件的差异
[译]React函数组件和类组件的差异原文: https://overreacted.io/how-are-function-components-different-from-classes/ 在 ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
七十六、React中的TodoList和拆分组件，组件之间的传值
2020/11/18. 周三.今天又是奋斗的一天. @Author:Runsen 这东西已经有很多大佬们写过了,就不多班门弄斧了.主要使用这个例子入门 React ,包括 state.props.组件 ...

React之智能组件和木偶组件

React之智能组件和木偶组件相关推荐

最新文章

热门文章