如果我在ReactJS或React Native的类的构造函数中使用setState()函数,将会发生什么?

reactjs React.js

古一Green

2020-04-07

出于好奇,我只想知道如果我setState()在React Native或ReactJS的Class的构造函数中使用函数会发生什么如:

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

React将会发生什么生命周期?


我还没有阅读React中的代码。那样写恐怕会造成一些损害。

第4042篇《如果我在ReactJS或React Native的类的构造函数中使用setState()函数,将会发生什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
猴子宝儿神奇 2020.04.07

什么setState本质上确实是运行了一堆你可能不会在构造函数需要逻辑的。

当您执行操作时state = {foo : "bar"},只需将任何东西分配给javascript对象state,就像对待其他任何对象一样。state仅此而已,只是每个组件局部的常规对象)。

使用时setState(),除了分配给对象外,stateReact还重新释放组件及其所有子元素。您不需要在构造函数中使用它,因为无论如何该组件都没有被渲染。

小卤蛋阳光 2020.04.07

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

状态:包含本地状态的组件具有称为“ this.state”的属性。

SetState:React组件有一个可用的方法setState调用“ this.setState”使React重新渲染您的应用程序并更新DOM。您还可以在setState中跟踪prevstate如果在构造函数中使用setState,则会得到类似这:只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState()。

小宇宙 2020.04.07

React没有在任何生命周期事件中限制使用setState。 React官方文档链接用于状态更新

有人告诉你不能直接在构造函数外部访问状态。因此,您可以随时随地调用setState。

从技术上讲,setState旨在使用传入的一些新值来更新现有状态,这些新值将在下一个更新周期中通过批处理对React句柄做出反应,因此在setState之后立即使用console.log状态会给出陈旧的值。

现在让我们关注如果在构造函数中调用setState会怎样。React将准备将新状态传递给setState的批处理代码段,并触发更新。

尽管反应并没有阻止您这样做,但是它知道这样做可能会使您陷入困境,因此给您留下了一个很好的信息

警告:setState(...):只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState()。这是无人值守。请检查组件的代码。

React会继续加载组件,但此批更新永远不会反映出来。React如何检查您要更新的状态,因此,如果万一您尝试更新setState中尚未处于状态的新值,那么它将通过null检查。

未捕获的TypeError:无法读取null的属性XXXXX

如此得出的结论是:如果您尝试这样做,可能不会导致错误,但是您将不得不承担不良行为,因为即使触发这些更新也不会反映任何错误。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android