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种基本方法可以创建reusable React component：

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实际上已被babel转化为require。 require和import都需要某种捆绑工具，例如webpack或browserify才能在浏览器中使用。

render（）vs .render：

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

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

Answer 2

AirBnB使用ES6方式，但需要像Babel这样的转发器。

ES6是Javascript语言的下一个版本

了解更多： https://toddmotto.com/react-create-class-versus-component/

Answer 3

正如他们所说，给猫剥皮的方法不止一种。碰巧的是，创建 React 组件的方法也不止一种，而且对动物更友好！

React 最初发布时，没有在 JavaScript 中创建类的惯用方法，因此提供了 'React.createClass'。

后来，作为 ES2015 的一部分，类被添加到语言中，其中添加了使用 JavaScript 类创建 React 组件的能力。与函数式组件一样，JavaScript 类现在是在 React 中创建组件的首选方式。

对于现有的“createClass”组件，建议您将它们迁移到 JavaScript 类。但是，如果您有依赖于 mixin 的组件，则转换为类可能不是立即可行的。如果是这样，可以在 npm 上使用 create-react-class 作为替代品。

最简单的 React 组件版本是一个简单的 JavaScript 函数，它返回一个 React 元素：

功能组件：

function Label() {
  return <div>Super Helpful Label</div>
}

当然，有了 ES6 的奇迹，我们可以把它写成一个箭头函数。

const Label = () => <div>Super Helpful Label</div>

这些是这样使用的：

const Label = () => <div>Super {props.title} Helpful Label</div>

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
         <Label title="Duper" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

使用函数，您还可以解构函数签名中的属性。它使您不必一遍又一遍地编写道具。

组件也可以是 ES6 类。如果您希望您的组件具有本地状态，那么您需要有一个类组件。类还有其他优点，例如能够使用生命周期钩子和事件处理程序。

类组件：

class Label extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <div>Super {this.props.title} Helpful Label</div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Label title="Duper" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

两种风格各有利弊，但在可预见的未来，函数式组件正在取代现代 React。

功能组件编写得更短更简单，这使得开发、理解和测试更容易。
类组件可能会因this的这么多用途而混淆。使用函数式组件可以轻松避免这种混乱并保持一切整洁。

React 团队正在为函数式组件支持更多 React 钩子，以替换甚至改进类组件。 React团队早些时候提到他们将通过避免不必要的检查和内存分配来优化功能组件的性能。
尽管听起来很有希望，但最近为功能组件引入了新的钩子，例如 useState 或 useEffect，同时还承诺它们不会过时的类组件。团队正在寻求在较新的情况下逐步采用带有钩子的功能组件，这意味着无需将使用类组件的现有项目切换到使用功能组件进行整体重写，以保持一致。

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

3 个答案: