Question

考虑代码：

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

有人可以帮助我理解为什么吗？

预先感谢

Answer 1

我认为您的组件最初是由于<React.StrictMode>

渲染两次的

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

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

valRef_Current 1
valRef_Current 2

您可以查看此博客post for details

Answer 2

真正输出的原因是React Strict Mode，这是一个用于突出显示已弃用和不安全方法的开发工具。它自动包含在新的create-react-app项目中，并包含在codeandbox上，这是我能够复制您的行为的地方。在完成其工作的过程中，它将导致两次渲染，但在创建生产版本时将不包括在内。通常您可以在<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>

功能性React组件的生命周期

2 个答案: