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

【问题标题】：React Components - What is the proper way to create them?React Components - 创建它们的正确方法是什么？
【发布时间】：2016-12-12 07:31:03
【问题描述】：

我正在学习 React，我遇到了两种不同的创建组件的方法。一个是Facebook，另一个是AirBnB。我还在我一直在看的教程中看到了它们。

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

脸书：

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>
        );
    }
}

免责声明：我可能在代码中有错误，所以请原谅我并专注于样式。

【问题讨论】：

标签： javascript reactjs components frontend jsx

【解决方案1】：

反应组件：

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

使用const MyComponent = () => {} 或function MyComponent() + Hooks 的函数组件 - 创建反应组件的当前标准。该组件是一个返回要渲染的 JSX 的函数。钩子取代了类组件的生命周期方法。
class MyComponent extends React.Component {} - ES6 的方式创建一个有状态的组件。需要通过 babel 进行转译，即还处理 JSX。如果您需要状态和生命周期方法 - 使用这个。
class MyComponent extends React.PureComponent {} - React 15.3.0 中的新功能。与 React.Component 相同，但具有类似 PureRenderMixin 的功能，因为 ES6 组件不支持 mixins。
React.createClass({}) - 老方法，不需要转译，但是由于您可能会使用 JSX，因此无论如何您都需要进行转译。仍然出现在旧的 React 教程中，但将被弃用最终。

JS 模块：

Nodejs 语法（commonjs）使用require()，ES6 使用import。你可以使用任何你喜欢的东西，甚至将两者混合使用，但是 ES6 模块的导入/导出方式对于反应组件来说更“标准”。现在 import 实际上被 babel 转译为 require 无论如何。 require 和 import 都需要某种捆绑工具，例如 webpack 或 browserify 才能在浏览器中工作。

render() 与 .render：

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

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

【讨论】：

非常感谢您的解释！您能否分享一些关于import 与require 和render() 与render: 部分的见解？

【解决方案2】：

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

ES6 是 Javascript 语言的下一个版本

【讨论】：

【解决方案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 同时还承诺它们不会废弃类组件。团队正在寻求在较新的案例中逐步采用带钩子的函数式组件，这意味着无需将现有的利用类组件的项目切换到使用函数式组件进行整个重写，从而保持一致。

【讨论】：