如果我在ReactJS或React Native中的类的构造函数中使用setState（）函数会发生什么？

Question

出于好奇，我只想知道如果我在 React Native 或 ReactJS 中的类的构造函数中使用 setState（） 函数会发生什么？如：

constructor(props) {
  super(props);
  this.setState({title: 'new title'});
}

React的生命周期是怎样的？

我没看过React里面的代码。我担心我那样写的话会有什么损害。

Answer 1

构造函数：构造函数用于初始化状态。

状态：包含本地状态的组件有一个名为“this.state”的属性。

SetState：React组件有一种称为setState的方法调用“this.setState”导致 React 重新渲染您的应用程序并更新 DOM.你也可以在 setState 中跟踪上一个状态 如果你在构造函数中使用 setState，你会得到这样的错误：只能更新已挂载或挂载的组件。这通常意味着您在未挂载的组件上调用了 setState（）。

Answer 2

错误消息应为< code >未捕获的类型错误:无法读取null的属性“VARIABLE _ NAME ”

请参阅以下两个jsfiddle代码段。

案例1)工作解决方案

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        name: 'world'
      } 
    }

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

ReactDOM.render(<Hello />, document.getElementById('container'));

案例2）解决方案不起作用

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.setState({
        name: 'hello'
      });
    }

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

ReactDOM.render(<Hello />, document.getElementById('container'));

发生这种情况：-constructor（starts setState）-render（fails-because state has no property'name'yet）-name is added to state（but too later-it has already rendered）

结论：

我的经验法则是，在constructor内部使用这个。state={}直接，其他地方使用this。setState（{}）；

Answer 3

setState本质上所做的是运行一系列可能在构造函数中不需要的逻辑。

当您进入state={foo:“bar”}时，您只需向javascript对象状态>赋值，就像您对其他对象一样。（顺便说一句，这就是state的全部内容，它只是每个组件本地的常规对象）。

当您使用setState（）时，除了分配给对象state反应还会重新渲染组件及其所有子组件。您在构造函数中不需要，因为组件还没有被渲染。