浅谈React组件

目前的前端开发主流技术都已经往组件化方向发展，而每学一门新的框架的时候，最基础的部分一定是学习其组件的编写方式。组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石元素。

目前，React支持三种方式来定义组件

函数式定义的无状态组件
Es5原生方式React.createClass定义的组件
Es6形式的extends React.Component定义的组件

无状态函数式组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无state状态的。具体的创建形式如下：

function Nav(props) {
  return <div>{props.name} UED</div>
}
ReactDOM.render(<Nav name="Yuandian" />, rootNode)

所说的无状态组件，就是没有状态控制的组件，只做纯静态展示的作用，无状态组件是最基本的组件形式，它由属性props和渲染函数render构成。由于不涉及到状态更新，所以这种组件的复用性也很强。除此之外无状态组件还有几个显著的特点。

组件不会被实例化，整体渲染性能的到提升。
组件无法访问生命周期的方法。
无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有调用副作用。

在ES6出现之前，React使用React.createClass方式来创建一个组件类，它接收一个对象作为参数，对象中必须声明一个render方法，render函数返回一个组件实例。具体的创建形式如下：

var Nav = React.createClass({
    getInitialState:function(){
      return {
           name:'Yuandian'
      };
    },
    render:function(){
        return  <div onClick={this._ClickEvent}>{this.state.name} UED</div>
    },
    _ClickEvent:function(){
        console.log(`This is ${this.state.name} UED`)
    }
})

与无状态组件相比，React.createClass和后边要聊的React.Component都是有状态的组件，这类有状态组件是要被实例化的，并且可以访问组件完整的生命周期。但是随着React的发展，ES5的React.createClass方式的问题暴露出来:

React.createClass会自动绑定函数方法，导致不必要的性能开销，增加代码过时的可能性

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式,相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Yuandian'
        };
        this._ClickEvent= this._ClickEvent.bind(this);
    }
    render() {
        return  <div onClick={this._ClickEvent}>{this.state.name} UED</div>
    },
    _ClickEvent(){
        console.log(`This is ${this.state.name} UED`)
    }
}

根据上面展示代码中两者定义组件的语法格式不同之外，两者还有很多重要的区别，下面就描述一下两者的主要区别。

函数this自绑定

React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正确设置。

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState()方法来配置组件相关的状态，
React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps()的方法来获取默认组件属性的。React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的class的静态属性来配置的。

以上这些组件编写模式基本上可以覆盖目前工作中基本所需要的模式。在写一些复杂的框架组件的时候，仔细设计和研究组件间的解耦和组合方式，能够使后续的项目可维护性大大增强。

函数this自绑定

组件初始状态state的配置不同

组件属性类型propTypes及其默认props属性defaultProps配置不同

猜你喜欢