【React】React中有多少种定义组件的方法?

[dongtong]

在刚开始接触React的时候，可能大多数情况下，我们都会选择使用React.createClass这种定义方式。它使用的是ES5的标准语法。后面当ES2015(6)越来越新潮时，大家都使用ES2015的中的class定义方式，结合Babel降级到ES5。

下面介绍几种在代码中经常使用到的定义React组件方式。

1. 使用ES5的React.createClass

var HelloWorld = React.createClass({
    render: function() {
        return (<h1>Hello World</h1>);
    }
});

1. 使用ES2015的class定义方式

class HelloWord extends React.Component {
    render() {
        return (<h1>Hello World</h1>);
    }
}

1. 使用ES5的无状态函数

var HelloWorld = function(props) {
    return (<h1>Hello World</h1>);
}

1. 使用ES2015的无状态函数

const HelloWorld = (props) => {
    return (<h1>Hello World</h1>);
}

无状态定义组件，主要通过props,可以避免使用this。 不参与组件生命周期，自然效率比较高。同时测试起来也比较方便，基本都是一些功能小模块。主要适用于不会改变的组件，如果想重新渲染此组件，可以通过container组件props传递下来，刷新父类组件。

如果组件关注state, 生命周期，通过refs访问原生DOM,以及操作嵌套函数，那么定义有状态的组件，其他场景可以定义无状态组件。

还有其他几种非主流的定义方式

• Object.create
• mixins
• Parasitic Componnents
• StampIt

参考