useState 从父级传递给子级并在子级中使用不会触发子级的重新渲染

Question

所以，我猜想当 useState 更新时，父组件不会重新渲染子组件。 但是组件应该在使用 useState 时自动重新渲染，对吗？ 或者我错过了什么......

index.js

import { useEffect, useState, useRef } from "react";

import Clicking from "./clicking";

export default function IndexPage() {
  const parentBtn = useRef(null);

  const [clicks, setClicks] = useState(0);

  useEffect(() => {
    console.log("Clicks: ", clicks);

    if (null !== parentBtn.current) {
      parentBtn.current.addEventListener("click", () => setClicks(clicks + 1));
    }
  }, [clicks]);

  return (
    <div>
      <p>Clicks number : {clicks}</p>
      <Clicking clicks={clicks} setClicks={setClicks} />
      <button ref={parentBtn}>Parent button</button>
    </div>
  );
}

clicking.js

import { useEffect, useRef } from "react";

const Clicking = ({ clicks, setClicks }) => {
  const childBtn = useRef(null);

  useEffect(() => {
    childBtn.current.addEventListener("click", () => setClicks(clicks + 1));
  }, []);

  return <button ref={childBtn}>Child button</button>;
};

export default Clicking;

有人知道怎么解决吗？

这里是案例的代码框：https://codesandbox.io/s/pensive-sun-9993d

感谢您的帮助！

Answer 1

问题是您的useEffect 只运行一次，因此只接收clicks 的初始值。
您需要做的是停止将 clicks 值传递给孩子，而只需从 setClicks 函数中获取状态值，因为无论如何您的更新都取决于之前的状态值。

您还应该将setClicks 作为依赖项传递给useEffect，尽管在这种情况下它在技术上不是强制性的，因为该函数已被记忆，因此永远不会改变，但这是最佳实践，您将避免如果你这样做，未来。

但是无论如何，孩子中的useEffect 在您的情况下是无用的，您最好将onClick 道具传递给孩子，这将触发父母的功能以在单击按钮时更新计数器。 父母也是如此，您可以简单地使用 onClick 属性而不是使用 useRef 并最终得到这个更简单的代码：

index.js

import { useState } from "react";

import Clicking from "./clicking";

export default function IndexPage() {
  const [clicks, setClicks] = useState(0);

  const updateClicksCounter = () => {
    setClicks(clicks => clicks + 1);
  };

  return (
    <div>
      <p>Clicks number : {clicks}</p>
      <Clicking onClick={updateClicksCounter} />
      <button onClick={updateClicksCounter}>Parent button</button>
    </div>
  );
}

clicking.js

const Clicking = ({ onClick }) => {
  return <button onClick={onClick}>Child button</button>;
};

export default Clicking;

Answer 2

我在使用setClicks的孩子身上找到了解决方案

我换了

setClicks(clicks + 1)

通过

setClicks(val => val + 1)

而且它有效。 也许有人对反应生命周期有解释？