出于好奇，我只想知道如果我setState()在 React Native 或 ReactJS 的类的构造函数中使用函数会发生什么？如：
constructor(props) {
super(props);
this.setState({title: 'new title'});
}
React 的生命周期会发生什么？
我还没有阅读 React 里面的代码。当我这样写时，我担心它会受到一些损害。
如果我在 ReactJS 或 React Native 的类的构造函数中使用 setState() 函数会发生什么？
IT技术
reactjs
react-native
2021-04-03 03:25:42
4个回答
什么setState本质上确实是运行了一堆你可能不会在构造函数需要逻辑的。
当你去的时候，state = {foo : "bar"}你只需将一些东西分配给 javascript 对象state，就像你分配任何其他对象一样。（state顺便说一下，这只是每个组件本地的一个常规对象）。
当您使用 时setState()，除了分配给对象之外，statereact 还会重新渲染组件及其所有子组件。您在构造函数中不需要它，因为无论如何还没有呈现组件。
错误消息将是
Uncaught TypeError: Cannot read property 'VARIABLE_NAME' of null
请参阅以下两个 jsfiddle 片段。
案例 1)工作解决方案 jsfiddle
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 - 因为 state 还没有属性 'name') -name 被添加到 state (但为时已晚 - 它已经呈现)
结论：
我的经验法则，里面直接constructor使用this.state = {}，其他地方使用this.setState({ })；
构造函数：构造函数用于初始化状态。
State：包含本地状态的组件有一个名为“this.state”的属性。
SetState：React 组件有一个可用的方法，称为 setState 调用“this.setState”会导致 React 重新渲染您的应用程序并更新 DOM。您还可以在 setState 中跟踪 prevstate 如果您在构造函数中使用 setState，您会得到如下错误this：只能更新一个挂载或挂载的组件。这通常意味着您在未安装的组件上调用了 setState()。
React 没有限制在任何生命周期事件中使用 setState。 用于状态更新的 React 官方文档链接
有人告诉你不能直接在构造函数之外访问状态。所以你可以随意调用 setState 任何地方。
从技术上讲，setState 的目的是用传入的一些新值来更新现有状态，这会通过批处理在下一个更新周期中react处理句柄，因此在 setState 之后立即使用状态的 console.log 将给出陈旧的值。
现在让我们关注如果我们在构造函数中调用 setState 会怎样。React 将准备批处理代码，并将新状态传递给 setState 并触发更新。
虽然 react 并没有阻止你这样做，但是它知道这样做可能会给你带来麻烦，所以给你留下一个好消息
警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查组件的代码。
React 继续加载组件，但更新永远不会反映该批次。
所以结论：如果你尝试这样做，你可能不会以错误告终，但你将不得不忍受不良行为，因为这些更新即使被触发也不会反映任何地方。