javascript - 使用构造函数与 state = {} 在反应组件中声明状态有什么区别？

Question

我发现有两种方法可以在类组件中声明状态，如下所示

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'John'
        }
    }

    render() {
        return  <div>{this.state.name}</div>
    }

}

和

class App extends Component {
    state = {
       name: 'John'
    }

    render() {
        return  <div>{this.state.name}</div>
    }

}

这两者有什么区别？

Answer 1

它们大致相等。显着的区别在于第二个示例中的初始化程序是在 之前执行的constructor。

第二种方法使用类字段建议。

它还不是 ECMAScript 标准的一部分，因此您需要正确设置转译器才能使用第二种方法。

UPD查看Babel 输出以更好地了解公共实例字段的工作方式。

Answer 2

当您要将props数据保存到时使用构造函数state

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'John'
    }
  }
}

否则你可以直接设置state硬编码数据

class App extends Component {
  state = {
    name: 'John'
  }
}

Answer 3

当您将方法添加到类时，它实际上已添加到函数的原型中。像这样：

class Same{
  thing() {}
}

// Equivalent to:

function Same() {}
Same.prototype.thing = function () {}

事物被定义一次并在类的所有实例中共享。

如果您将其重构为使用类字段，如下所示：

class Animal {
  thing() {}
  anotherThing = () => {} // Class Field
}

// Equivalent to:

function Animal () {
  this.anotherThing = function () {}
}

Animal.prototype.thing = function () {}

anotherThing是在每个新创建的实例上定义的，而不是在原型上。

开发经验与性能

这是您应该考虑的权衡。类字段使您的代码看起来可读且干净。但是，Class Fields在您的每个实例中都保留了anotherThing的副本。

因此，您应该仔细考虑是否要使用它们。