Reactjs 为什么这两个 div 的渲染方式不同

发布于08月07日

当我运行它时，它呈现的方式不同，尽管它与我的初学者POV相同. 例如，我不能在控制台开发工具中展开第一个div，但我可以展开第二个div！

Link, I haven't the right to post images个

为什么？

import React from "react"

export default function App() {

    const [time, setTime] = React.useState(0)

    React.useEffect(() => {
        const lol = setTimeout(() => setTime(prev => prev + 1), 100)
        return () => clearTimeout(lol)
    }
        , [time]
    )

    function ComponentTimer() {
        return <div> (I can't open this div in the console) Time : {time / 10} sec</div>
    }

    return (
        <main>
            {<ComponentTimer />}
            <div> (but I can open this one) Time : {time / 10} sec</div>
        </main>
    )
}

推荐答案

在第一个示例中，它是一个组件，您在100ms之后更改状态，这将重新呈现整个组件.如果您想看到两者完全相同，您所要做的就是从外部提取ComponentTimer，并将time作为props 传递为:

STACKBLITZ DEMO个

function ComponentTimer({ time }) {
  return (
    <div> (I can't open this div in the console) Time : {time / 10} sec</div>
  );
}
export default function App() {
  const [time, setTime] = React.useState(0);

  React.useEffect(() => {
    const lol = setTimeout(() => setTime((prev) => prev + 1), 100);
    return () => clearTimeout(lol);
  }, [time]);

  return (
    <main>
      <ComponentTimer time={time} />
      <div> (but I can open this one) Time : {time / 10} sec</div>
    </main>
  );
}