-1

考虑代码：

function Comp5 () {
  const [count, setCount] = useState(0)
  const valRef = useRef(0)
  useEffect(() => {
    setCount(prevCount => prevCount + 1)
  }, [])
  valRef.current += 1
  console.log('valRef_Current', valRef.current)
  return <div>Comp5</div>
}



function App () {
  return (
    <div>
      <Comp5 />
    </div>
  )
}

你的控制台输出是什么？我认为应该是： valRef_Current 1 valRef_Current 2 valRef_Current 3 valRef_Current 4

但真正的输出是： valRef_Current 1 valRef_Current 1 valRef_Current 2 valRef_Current 3

谁能帮我理解为什么？

提前致谢

4

2 回答 2

0

我认为您的组件最初渲染两次是因为<React.StrictMode>

  <React.StrictMode>
    <App />
  </React.StrictMode>,

这只会发生在开发环境中。您可以删除<React.StrictMode>以查看实际渲染。在这种情况下，您的输出将是。

valRef_Current 1
valRef_Current 2

您可以查看此博客文章了解详细信息

于 2020-09-30T23:55:03.690 回答
0

实际输出的原因是React Strict Mode，这是一种用于突出显示已弃用和不安全方法的开发工具。它自动包含在新的 create-react-app 项目和代码沙盒中，这是我能够复制您的行为的地方。它会在完成工作的过程中导致双重渲染，但在您创建生产构建时不会包含在内。您通常可以<App/>在index.js.

预期的行为实际上是：

valRef_Current 1

valRef_Current 2

组件安装、递增valRef并记录它。然后useEffect用一个新值设置状态，这会导致一个额外的渲染。valRef再次增加并记录其值。您可以观察此代码段中的行为：

function Comp5 () {
  const [count, setCount] = React.useState(0);
  const valRef = React.useRef(0);

  React.useEffect(() => {
    setCount(prevCount => prevCount + 1)
  }, []);

  valRef.current += 1
  console.log('valRef_Current', valRef.current);

  return <div>Comp5</div>
};



function App () {
  return (
    <div>
      <Comp5 />
    </div>
  )
};

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

于 2020-09-30T23:55:18.520 回答