Question

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

        rates.fromBTC(1, currency, function (err, rate) {     
                return rate;
        })

和

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

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

}

这两者有什么区别？

Answer 1

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

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

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

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

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 () {}

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

开发经验与绩效

这是您应该考虑的折衷。类字段使您的代码看起来可读和干净。但是，“类字段”在每个实例中都保留一个 otherThing 副本。

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

使用构造函数和state = {}在react组件中声明状态有什么区别？

3 个答案: