React Components - 创建它们的正确方法是什么？

Question

我正在学习React,我遇到了两种创建组件的方法.一个是Facebook,另一个是AirBnB.我也在我一直在看的教程中看到过它们.

这可能是一个愚蠢的问题,但哪一个更好？

Facebook的:

var React = require("react");

var Component = React.createClass({
    render: function(){
        return (
            <div>{this.props.item}</div>
        );
    }
});

module.exports = Component;

制作的Airbnb:

import React from "react";

export default class Component extends React.Component {
    render() {
        return (
            <div>{this.props.item}</div>
        );
    }
}

免责声明:我可能在代码中有错误,所以请原谅我,只关注风格.

Answer 1

反应组件:

您有4种基本方法来创建可重用的React组件:

• React.createClass({}) - 旧的方式,不需要转换,但既然你可能会使用JSX,你还是需要进行转换.仍然出现在旧的React教程中,但最终会被弃用.

• class MyComponent extends React.Component {} - ES6创建有状态组件的方式.需要通过babel进行转换,也可以处理JSX.如果您需要状态和生命周期方法 - 请使用此方法.

• class MyComponent extends React.PureComponent {}- React 15.3.0中的新功能.与React.Component相同,但具有类似PureRenderMixin的功能,因为ES6组件不支持mixins.

• const MyComponent = () => {}或function MyComponent()- 没有生命周期方法的无状态组件.如果使用箭头功能创建它,则需要进行转换.用于简单的显示组件.

JS模块:

Nodejs语法(commonjs)使用require()和ES6使用import.你可以使用你喜欢的任何东西,甚至混合两者,但ES6模块的导入/导出方式对于反应组件来说更加"标准".import不管怎样,现在实际上是由巴贝尔编写的require.双方require并import需要某种形式的捆绑工具,如的WebPack或browserify在浏览器中运行.

render()vs .render:

这render()是ES6在ES6类中定义方法的方法.

React.createClass({})需要一个JS对象文字.在ES5中,定义对象文字中的方法使用prop: function() {}语法,例如render: function()语法.顺便说一句 - 在ES6中,您实际上可以在文字中编写方法render().