Javascript 功能道具不会改变'；t出现子组件渲染为什么？

我有App，TseTest（有msg props）组件，TseTest有变量a，b，每个值都有随机数，它在控制台上打印值

当我按下按钮时，应用程序中的消息状态将从

function（）{console.log（“t”）；}

更改为

function（）{console.log（“tt”）；}

我预计测试人员将重新加载，因为msg已更改，控制台上的prins a、b带有新值，但事实并非如此

功能类型的道具在更改时似乎不会出现渲染

你知道为什么吗

const TseTest = ({ msg }) => {
  const a = Math.random();
  const b = () => Math.random();
  useEffect(() => {
    // console.log(msg)
    msg && msg();
  }, [msg]);
  return (
    <>
      {console.log("a", a)}
      {console.log("b", b())}
    </>
  );
};
const App = () => {
  const [msg, setMsg] = useState(function () {
    console.log("t");
  });

  return (
    <>
      <button
        onClick={() => {
          setMsg(function () {
            console.log("tt");
          });
        }}
      >
        test
      </button>
      <TseTest msg={msg} />
    </>
  );
};
export default App;

结果

t 
a 0.9264919874929558
b 0.5546484347625045
tt 

---

useState

采用一个实际用于状态的

函数，即首次将从该函数返回的任何内容设置为初始状态

 const [msg, setMsg] = useState(function () {
    console.log("t");
  });

现在，您希望将
msg
设置为
函数
，但实际情况是，正在设置该
函数
返回的值，而在您的情况下，该值是
未定义的
，因为您没有返回任何内容

类似地，
setMsg
也将
函数
作为第一个参数，该参数允许访问它的参数中的
先前状态
，并且从它返回的任何内容都设置为
msg

setMsg(function () {
    console.log("tt");
});

因此，在上面的示例中，由于没有返回任何内容，
undefined
被返回

因此，
msg
的值没有差别，因为这两次它都是
未定义的
，因此没有重新渲染

这是一个分叉沙箱，它可以实现您想要的：-


setMsg(function () {
    console.log("tt");
});