reactjs - react组件复用 - stateless component




在React/React Native中使用构造函数与getInitialState有什么区别? (4)

好的,最大的区别是从它们的来源开始,因此 constructor 是JavaScript中类的构造器,另一方面, getInitialStateReact lifecycle 的一部分。

constructor 是您的类被初始化的地方...

建设者

构造函数方法是用于创建和初始化使用类创建的对象的特殊方法。 在一个类中,只能有一个名为“ constructor”的特殊方法。 如果该类包含多个构造函数方法,则将引发SyntaxError。

构造函数可以使用super关键字来调用父类的构造函数。

在React v16文档中,他们没有提到任何首选项,但是如果您使用 createReactClass() 则需要 getInitialState ...

设定初始状态

在ES6类中,可以通过在构造函数中分配this.state来定义初始状态:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

使用createReactClass()时,您必须提供一个单独的getInitialState方法,该方法返回初始状态:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

访问 here 获取更多信息。

还创建了下面的图像,以显示React组件的几个生命周期:

我已经看到两者可以互换使用。

两者的主要用例是什么? 有优点/缺点吗? 是更好的做法吗?


如今,我们不必在组件内部调用构造函数-我们可以直接调用 state={something:""} ,否则以前我们首先要使用 super() 声明构造函数以继承 React.Component 类的所有内容。在构造函数中,我们初始化状态。

如果使用 React.createClass 则使用 getInitialState 方法定义初始化状态。


这两种方法不可互换。 使用ES6类时,应在构造函数中初始化状态,并使用 React.createClass 时定义 getInitialState 方法。

请参阅关于ES6类的官方React文档

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

相当于

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

constructorgetInitialState 之间的区别是 ES6 ES5 本身之间的区别。
getInitialStateReact.createClass
constructorReact.Component 一起 React.Component

因此,问题归结为使用 ES6 ES5的 优缺点。

让我们看一下代码的区别

ES5

var TodoApp = React.createClass({ 
  propTypes: {
    title: PropTypes.string.isRequired
  },
  getInitialState () { 
    return {
      items: []
    }; 
  }
});

ES6

class TodoApp extends React.Component {
  constructor () {
    super()
    this.state = {
      items: []
    }
  }
};

关于此有一个有趣的 reddit线程

React社区越来越靠近 ES6 。 也被认为是最佳实践。

React.createClassReact.Component 之间有一些区别。 例如,在这些情况下如何处理。 在此博客文章 和facebook的 自动绑定内容中 了解有关此类差异的更多信息

constructor 也可以用来处理这种情况。 要将方法绑定到组件实例,可以在 constructor 预绑定方法。 This 是做这些很酷的事情的好材料。

一些有关最佳做法的好材料
React.js中组件状态的最佳实践
将React项目从ES5转换为ES6

更新:2019年4月9日

随着Javascript类API的新变化,您不需要构造函数。

你可以做

class TodoApp extends React.Component {

    this.state = {items: []}
};

这仍然会转换为构造函数格式,但是您不必担心。 您可以使用这种更具可读性的格式。

带React挂钩

从React 16.8版本开始,有一个称为钩子的新API。

现在,您甚至不需要类组件即可拥有状态。 它甚至可以在功能组件中完成。

import React, { useState } from 'react';

function TodoApp () {
  const items = useState([]);

注意,初始状态作为参数传递给 useStateuseState([])

从官方文档中 了解更多关于react hooks 的信息





constructor