有没有办法等待状态的变化？（不是 setState）[关闭]答案

【问题标题】：Is there a way to await changes in state? (not setState) [closed]有没有办法等待状态的变化？（不是 setState）[关闭]
【发布时间】：2021-01-17 15:12:58
【问题描述】：

我想等待共享状态的变化并采取行动，所以：

function Foo() {
  const [bar, setBar] = useContext(myContext)

  const someHandler = async () => {      
    doSomething()
    while(true) {
      await stateDidChange(bar)
      doSomething()
    }
  }

  // apply someHandler to a button, etc
}

（是的，我知道我可以通过删除 while 循环并等待重新渲染来实现类似的效果 - 幽默 :)）

是否有像上面使用的stateDidChange(someRandomState) 这样的函数，或者可以通用编写吗？

【问题讨论】：

你真的需要一些清晰...根据你的代码你想阻塞当前线程但是你怎么能等待状态改变
@DennisVash 如果您等待异步函数，它不会阻塞当前线程；它将在等待的函数（返回“承诺”）完成后执行后续代码。请参阅：medium.com/better-programming/… 停止执行一个函数（最初从事件处理程序、useEffect 等运行）无限期运行是完全合乎逻辑的，它不会影响页面上 DOM 元素的渲染，也不会阻止其他组件发生变化您所依赖的州。
这是同一个线程，你说你不想在渲染上中继，即状态变化，所以没有它你的 UI 会卡住（你需要另一个对象进行比较）。听起来像xyproblem.info
如果你有全局状态（比如redux store），你可以做到。如果不传递另一个 state ref，你就无法使用当前的 React API 来实现它

标签： reactjs react-hooks react-async

【解决方案1】：

它被称为 componentDidReceiveProps(prevProps, prevState) 或只是一个 useEffect 挂钩，其中包含您要作为依赖项跟踪的 prop/state 值：

useEffect(() => {

}, [bar]);

【讨论】：

谢谢，但我特意寻找不依赖重新渲染的解决方案（如果存在）。

【解决方案2】：

您可能喜欢使用回调模式。

const callbackFunction = () =>  console.log("Some code");

const stateDidChange = (option = {}) => {
        if(option.cb){
                option.cb();
        }
};

const option = {};
option.cb = callbackFunction;

stateDidChange(option);

【讨论】：