React创建组件的三种方法

本文是我的个人网站G笔记中的内容，最新的内容可访问G笔记

React创建组件的三种方法

作者

第一种：创建无状态函数式组件

无状态函数式组件本质上就是一个常规函数，接受一个 props 并返回一个元素来展示，不涉及 state 状态的操作。

创建形式如下：

function Example(props) {
  return (<div className='example'>Hello {props.name}, age is {props.age}.</div>)
}
ReactDOM.render(<Example name="lijiam" age="18" />, "root") 

如果用ES6语法，也可以这样写：

const Example = ({ name, age }) => <div className='example'>Hello {name}, age is {age}.</div>
ReactDOM.render(<Example name="lijiam" age="18" />, "root") 

此方法的特点如下：

• 组件不会被实例化，整体渲染性能得到提升；

• 组件不能访问this对象或ref；

• 组件无法访问生命周期的方法；

  没有任何生命周期方法，也就是说当每次上层组件树状态发生变更时它们都会重新渲染，这就是因为缺少 shouldComponentUpdate 方法导致的。这也同样意味着您不能定义某些基于组件挂载和卸载的行为。

• 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用。

第二种：通过React.createClass创建（react16已被废弃）

用ES5的原生的JavaScript来创建，如下：

var Example = React.createClass({
    getInitialState: function () {
        return {
            lists: []
        };
    },
    render: function () {
        return (
            <div>
                <input type="text" ref="myExample" placeholder="What need to be done?" onKeyUp={this.Enter}/>
                <ul>
                    {
                        this.state.lists.map(function (textValue,index) {
                            return <li key={index}>{textValue}</li>;
                        })
                    }
                </ul>
            </div>
        );
    },
    Enter: function (event) {
        var works = this.state.lists;
        var work = this.refs.myExample.value;
        if (event.keyCode == 13) {
            works.push(work);
            this.setState({lists: works});
            this.refs.myExample.value = "";
        }
    }
});

就是一个文本框，当输入内容按下回车键的时候将添加到列表中，这里通过 this.Enter 来绑定 onKeyUp 事件。

此方法的特点如下：

• 会自动绑定函数方法，所以会导致不必要的性能开销。

第三种：通过React.Component创建

React.Component 是以 ES6 的形式来创建 React 的组件的，是 React 目前极为推荐的创建有状态组件的方式，相对于 React.createClass 可以更好实现代码复用。示例如下：

class Example extends React.Component{
    constructor (props){
        super(props);
        this.state = {
            lists: []
        };
        this.Enter=this.Enter.bind(this); //绑定this
    }

    render() {
        return (
            <div>
                <input type="text" ref="myExample" placeholder="What need to be done?" onKeyUp={this.Enter}/>
                <ul>
                    {
                        this.state.lists.map(function (textValue,index) {
                            return <li key={index}>{textValue}</li>;
                        })
                    }
                </ul>
            </div>
        );
    }

    Enter(event) {
        var works = this.state.lists;
        var work = this.refs.myExample.value;
        if (event.keyCode == 13) {
            works.push(work);
            this.setState({lists: works});
            this.refs.myExample.value = "";
        }
    }
};

这里可以看到需要手动绑定this对象。

React.Component三种手动绑定this的方法

1. 在构造函数中绑定

constructor(props) {
    super(props);
    this.Enter = this.Enter.bind(this);
}

2. 使用bind绑定

<div onKeyUp={this.Enter.bind(this)}></div>

3. 使用arrow function绑定

<div onKeyUp={(event)=>this.Enter(event)}></div>

关于this

• React.createClass 创建的组件：每一个成员函数的this都有React自绑定，任何时候使用，直接使用this.method即可，函数中的this会被正确设置；
• React.Component 创建的组件：成员函数不会自动绑定this，需要手动绑定，否则this不能获取当前组件实例对象。

总结

在实际开发中，尽量使用第一种创建无状态函数式组件，否则，如需用到state、生命周期方法等，可以考虑使用第三种 React.Component ES6的方式创建组件。