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

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

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

反应组件：

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

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

JS模块：

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

render（）与.render:

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

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

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

ES6是Javascript语言的下一个版本

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

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

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

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

对于现有的"createClass"组件，建议您将它们迁移到JavaScript类中。但是，如果您有依赖于mixin的组件，那么转换为类可能不会立即可行。如果是这样的话，create-react类在npm上可用作替换。

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，同时还承诺它们不会成为过时的类组件。该团队正在寻求在较新的情况下逐步采用带有钩子的功能组件，这意味着没有必要将现有的使用类组件的项目切换到使用功能组件的整个重写中，以便它们保持一致。

相关内容

最新更新

热门标签：