Question

我开始使用钩子重新创建官方的React教程。

我遇到了两个要解决的问题。

有关完整代码（包括行号），请参阅CodePen。

完整代码

问题1

// Click handler
function handleClick(e) {
  e.preventDefault();
  // console.log('1) Inside Square click handler');
  props.onUpdate();

  // Logs un-updated value, probably because setState is async
  console.log("props.value", props.value);

  // STACKOVERFLOW QUESTION (Line 18)
  // This still logs un-updated value (null). Why?
  // PS: Line 23 logs the right value
  window.setTimeout(() => {
    console.log("props.value after timeout", props.value);
  }, 1000);
}

// Logs correct value (Line 23)
console.log("props.value outside", props.value);

第18行从prop中的处理程序中记录传递的setTimeout。我知道state是在第9行中设置的异步（从父级回调）。我知道第12行会在异步state更新之前记录该值，但我不明白为什么超时仍会打印错误的值。

问题2

<div className = "status" >
  {
    (() => {
      console.log("rendering, status:", status);
      return status;
    })()
  }
</div>

为什么第75和76行中的status没有反映最新的state变化？我在第62行中进行了设置，然后直接在之后更新state，这反过来会导致使用正确的值进行重新渲染。我猜答案是重新渲染再次运行整个功能组件，并重置status（即，仅保存 state）。如果是正确的话，我们如何确切地知道每次state / prop / context更新时重新渲染哪些组件？

官方React教程，使用Hooks-组件未更新

0 个答案: