使用构造函数与 state = 在反应组件中声明状态有啥区别？

Posted 2023-02-21

【中文标题】使用构造函数与 state = 在反应组件中声明状态有啥区别？

【英文标题】：What is the difference between using constructor vs state = to declare state in react component?使用构造函数与 state = 在反应组件中声明状态有什么区别？

【发布时间】：2018-01-09 02:33:47

【问题描述】：

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

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>
    

这两者有什么区别？

【参考方案1】：

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

第二种方法使用class fields提案。

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

UPD查看Babel output，以更好地了解公共实例字段的工作原理。

【参考方案2】：

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

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

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

class App extends Component 
  state = 
    name: 'John'
  

【讨论】：

显然这不再有效。我成功地在类 state = time: this.props.time, ;

中直接将 props 值分配给状态

向状态添加道具通常被认为是反模式：reactjs.org/docs/react-component.html#constructor。除非你想明确地导出状态

【参考方案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 是在每个新创建的实例而不是原型上定义的。

开发经验与性能

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

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

【讨论】：

“类字段在你的每个实例中都保留一份 anotherThing 的副本”，构造函数不也是这样做的吗？

嗨@vikrant！如果我理解正确，您的问题源自 OOP 继承（如在 Java 中）。在 Java 中，构造函数确实为每个实例创建了 anotherThing。在 javascript 中，事情的表现“略有”不同。原型链为每个实例保留对 anotherThing 的引用，这使得它们轻量且精简。一本很棒的丛书（Kyle Simpson 着）揭示了 Javascript 基础的基本原理。我强烈建议您专门阅读本节：github.com/getify/You-Dont-Know-JS/blob/master/…