React渲染顺序及useEffect执行顺序探究




import React, { useState, useEffect } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log('第一个Effect:', count);
    setCount(count + 1);
  }, []); // 空依赖数组，仅在组件挂载时执行
 
  useEffect(() => {
    console.log('第二个Effect:', count);
  }); // 未传递依赖数组，每次状态更新时执行
 
  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}
 
export default Example;

这段代码演示了如何在React函数组件中使用useState和useEffect。它有两个useEffect钩子，第一个有一个空的依赖数组，仅在组件挂载时执行，第二个没有依赖数组，每次count更新时都会执行。这样可以帮助理解React函数组件的渲染和生命周期。

React渲染顺序及useEffect执行顺序探究

评论已关闭

推荐阅读