时间戳

首页 > 解决方案 > 在反应钩子中，即使没有调用 set state，组件也可以工作

reactjs - 在反应钩子中，即使没有调用 set state，组件也可以工作

问题描述

这是我的反应钩子代码：

function State(){
  var [msg,set_msg]=React.useState("hello") //not rendered, just to force render
  var [data,set_data]=React.useState({version:1})
  function onClick(){
set_msg(x=>x+'x') //just to force render
data.version+=1   //changing state in place, but it still updates
  }
  return <div>
version={data.version}
<button {...{onClick}}>click</button>
  </div>
}
ReactDOM.render(<State />,document.querySelector('#root') );
  <div id="root"></div>

  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel" src="index.js"></script>  
    
<div id=root></root>

我的问题是：为什么它有效？代码没有设置数据，只是更改了适当的版本

标签： reactjsreact-hooks

解决方案

由于您使用对象作为状态的值，因此您可以在不更新状态的情况下更改其属性。这是有效的，因为状态存储了对对象的引用，而不是其所有值。

如果您要更新就地状态 ( data.version+=1)，它不会强制组件重新渲染，因此不会看到任何更改，但数据仍会更改。由于您在之前的行中强制渲染状态更改（直到 onClick 函数完成后才会执行，因此组件反映了数据的更改。

总之，这实际上适用于存储和变异数据；它实际上不会再次渲染组件。您的组件更新以反映数据更改的唯一原因是您强制更新前一行。

推荐阅读