我正在学习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>
        );
    }
}

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

解决方法:

反应组件：

您有4种创建reusable React component的基本方法：

> React.createClass({}) – 旧方法,不需要转换,
但既然你可能会使用JSX,那么无论如何你都需要进行转换.
仍然出现在旧的React教程中,但将被弃用
最终.
> class MyComponent扩展了React.Component {} – ES6方式
创建有状态组件.需要通过babel进行转换
还处理JSX.如果你需要状态和生命周期方法 – 使用
这个.
> class MyComponent在React
15.3.0中扩展了React.PureComponent {} – new.与React.Component相同,但具有类似PureRenderMixin的功能,因为ES6组件不支持mixins.
> const MyComponent =()=> {}或函数MyComponent() –
没有生命周期方法的无状态组件.需要转换
如果你使用箭头功能创建它.用它来进行简单的显示
组件.

JS模块：

Nodejs语法(commonjs)使用require(),ES6使用import.您可以使用任何您喜欢的东西,甚至可以混合两者,但ES6模块的导入/导出方式对于反应组件来说更为“标准”.现在进口实际上是由巴贝尔提出要求的.需要和导入都需要某种捆绑工具,例如webpack或browserify,以便在浏览器中工作.

render()vs .render：

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

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