功能反应组件生命周期

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 1valRef_Current 2valRef_Current 3valRef_Current 4

但实际产出是：valRef_Current 1valRef_Current 1valRef_Current 2valRef_Current 3

有人能帮我理解为什么吗？

提前感谢

Answer 1

实际输出的原因是React Strict Mode，这是一个用于突出不推荐使用和不安全方法的开发工具。它会自动包含在新的create-react应用程序项目中，并包含在codesandbox中，我可以在这里复制你的行为。它将在执行工作的过程中导致双重渲染，但在创建生产构建时不会包括在内。您通常可以在index.js中发现它包裹在顶级<App/>周围。

预期的行为实际上是：

valRef_Current 1
valRef_Current 2

组件装载、递增valRef并记录它。然后useEffect用一个新值设置状态，该值将导致一个额外的渲染。CCD_ 5再次递增并记录其值。您可以在以下片段中观察到行为：

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>

Answer 2

我认为由于<React.StrictMode>，您的组件最初渲染了两次

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

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

valRef_Current 1
valRef_Current 2

你可以查看这个博客文章的详细信息