在React的功能组件中处理陈旧的道具和状态

JavaScript封闭通常会引起头痛，尤其是在反应中，导致了陈旧的道具和状态。当异步代码引用过时的prop或状态值导致UI更新时，就会发生这种情况。

了解陈旧的道具和国家

当异步操作使用对不再当前的道具或状态的引用时，就会出现陈旧的道具/状态。返回的值不是最新值。让我们以一个常见的例子说明：

功能counter（）{
  const [count，setCount] = usestate（0）;

  函数handlealertClick（）{
    settimeout（（）=> {
      警报（“您单击：”计数）;
    }，3000）;
  }

  返回 （
    <div>
      <p>单击{count}时间</p>
      <button onclick="{()"> setCount（计数1）}>单击我</button>
      <button onclick="{handleAlertClick}">显示警报</button>
    </div>
  ）；
}

（现场演示）

观察此行为：

1. 单击“点击我” - 计数器增加。
2. 单击“显示警报” - 3秒钟后，警报在“显示警报”时显示计数，而不是当前计数。
3. 再次单击“显示警报”，然后在警报之前迅速单击“单击我”。警报显示了一个过时的计数。

这证明了封闭行为： setTimeout在定义时捕获了对count的参考，而不是在执行时。

用裁判解决陈旧的参考

React建议使用REFS访问异步回调中的最新状态。裁判跨渲染提供了一个持久的对象。

“肮脏”裁判方法

我们可以使用useRef()创建一个REF，与状态并在同步函数中使用它：

功能counter（）{
  const [count，setCount] = usestate（0）;
  const ref = useref（count）;

  函数handlealertClick（）{
    settimeout（（）=> {
      警报（“您单击：” ref.current）;
    }，3000）;
  }

  返回 （
    <div>
      <p>单击{count}时间</p>
      <button onclick="{()"> {
        setCount（计数1）;
        ref.Current =计数1;
      }}>单击我</button>
      <button onclick="{handleAlertClick}">显示警报</button>
    </div>
  ）；
}

（现场演示）

这是因为裁判保持一致，这与状态变量的参考不同。

清洁裁判方法

手动更新各处的裁判很麻烦。更可扩展的方法涉及辅助功能：

功能counter（）{
  const [count，setCount] = usestate（0）;
  const ref = useref（count）;

  功能UpdateState（NewState）{
    ref.current = newstate;
    SetCount（Newstate）;
  }

  函数handlealertClick（）{...}

  返回 （
    <div>
      <p>单击{count}时间</p>
      <button onclick="{()"> UpdateState（计数1）}>单击我</button>
      <button onclick="{handleAlertClick}">显示警报</button>
    </div>
  ）；
}

（现场演示）

可重复使用的自定义挂钩

为了增强可重复性，请创建一个自定义钩子：

函数useasyncreference（value）{
  const ref = useref（value）;
  const [，forceRender] = usestate（false）; //力重新渲染

  功能UpdateState（NewState）{
    ref.current = newstate;
    前面的人（s =>！s）;
  }

  返回[参考，UpdateState];
}

功能counter（）{
  const [count，setCount] = useasyncreference（0）;
  // ...其余的计数器组件
}

此挂钩管理REF并提供updateState功能。 forceRender确保UI更新。

处理道具

为了支持道具，请在钩子上添加一个标志：

函数useasyncreference（value，isprop = false）{
  const ref = useref（value）;
  const [，forceRender] = usestate（false）;

  功能UpdateState（NewState）{
    if（！object.is（ref.Current，newstate））{//优化重新租赁
      ref.current = newstate;
      前面的人（s =>！s）;
    }
  }

  如果（ISProp）返回参考；
  返回[参考，UpdateState];
}

现在，钩子可以有效地处理状态和道具。在使用道具时，请记住将true作为第二个参数。

这种全面的方法解决了反应功能组件中的陈旧参考，提供了可重复使用的解决方案。

以上是在React的功能组件中处理陈旧的道具和状态的详细内容。更多信息请关注PHP中文网其他相关文章！