1. 首页
  2. 问题列表
  3. 我是否应该对一个不影响呈现的变量使用state？
提问者：小点点

我是否应该对一个不影响呈现的变量使用state？


  1. 在下面的代码中，如何使status变量的值在setstatus（！status)之后立即更改？ 我知道React中的状态更新是批处理的，因此我使用了带有回调的UseEffect，但在第一次单击按钮时，status的值仍然被记录为false（好像它没有立即更改一样）。
  2. 考虑到应用程序呈现完全不依赖于status变量（实际上，我甚至更希望该变量的更改不触发呈现），那么完全不使用useeffect而将status改为一个“普通”变量（如status=true）是否是一种不好的做法？

null

function App() {

  const [status, setStatus] = React.useState(false)

  React.useEffect(() => toggleStatus, [status])

  function onClickHandler() {
    toggleStatus()
    console.log(status)
  }

  function toggleStatus() {
    setStatus(!status)
  }

  return ( 
    <div>
        <button onClick={onClickHandler}>Toggle & log status</button>
    </div>
  )
}

ReactDOM.render( < App /> , document.getElementById('root'))
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<div id="root"></div>

null


共2个答案

匿名用户

  1. 单击OnClickHandler时触发==>； toggleStatus和Console.log（status）是同步触发的(SetStatus（！status）是异步触发的。因此您看到false被记录。并且您错误地使用了UseEffect。反应。UseEffect(()=>toggleStatus，[status])表示UseEffect返回toggleStatus函数的第一个参数，即

尝试此操作查看记录的状态

React.useEffect(() =>{
  //you can see true after first click here
  console.log(status)
}, [status])

匿名用户

在下面的代码中，我如何使状态变量的值在setStatus（！status)之后立即更改？

不能立即更改状态，因为更改状态是异步的。

我甚至更希望该变量的更改不触发渲染），完全不使用useeffect而将status改为“正常”变量，像status=true那样赋值，这是不是不好的做法？

首先，检查UseEffect的用例是什么。

关于生成一个“普通”变量，这确实是一个糟糕的做法:

const Component = () => {
   let variable = ...;
   return <>...</>
}

这是因为，在每次呈现时，这些变量将被重新赋值（因为函数组件的主体在每次呈现时执行）。 通常，它不是想要的行为。

相反，您希望对useref使用引用。 查看useref和变量之间的区别。

更改引用值不会触发渲染，因此不会更新UI。

相关问题