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;

民宿：

import React from "react";

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

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

Answer 1

反应组件：

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

• 使用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 组件不支持 mixin。

• React.createClass({}) - 旧方法，不需要转译，但由于您可能会使用 JSX，所以无论如何您都需要转译。 仍然出现在旧的 React 教程中，但最终会被弃用。

JS模块：

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

渲染（）与 .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 之类的功能组件引入了新的钩子，同时还承诺它们不会过时类组件。 团队正在寻求在较新的案例中逐步采用带有钩子的功能组件，这意味着无需将现有的使用类组件的项目切换到使用功能组件进行整体重写，从而保持一致。