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

Question

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

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

脸书：

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

来自 AirBnB 的版本使用 ES6 方式，但需要像 Babel 这样的转译器。

ES6 是 Javascript 语言的下一个版本

阅读更多： https://toddmotto.com/react-create-class-versus-component/

Answer 2

React 组件：

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

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

JS 模块：

Nodejs 语法 (commonjs) 使用 require() 而 ES6 使用 import。你可以使用任何你喜欢的东西，甚至可以混合使用两者，但是 import/exporting 的 ES6 模块方式对于 React 组件来说有点 'standard'。现在 import 实际上是由 babel 转译为 require 的。 require 和 import 都需要某种捆绑工具，例如 webpack 或 browserify 才能在浏览器中工作。

render() 与 .render:

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

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

Answer 3

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

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

后来，classes 作为 ES2015 的一部分添加到语言中，其中添加了使用 JavaScript classes 创建 React 组件的能力。连同 功能组件 、JavaScript classes 现在是在 React 中创建组件的首选方式。

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

React 组件的最简单版本是一个普通的 JavaScript 函数，returns 一个 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 classes。如果您希望您的组件具有本地状态，那么您需要有一个 class component.There 也是 classes 的其他优点，例如能够使用生命周期挂钩和事件处理程序。

Class 分量：

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。

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

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

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

React Components - What is the proper way to create them?

javascript

frontend

components

jsx

reactjs