react|useState的异步渲染

kkkAloha2024-09-01 8:13

useState

组件里面的变量可以用state来表示，setState函数是用来更新state的值的
用法

javascript 复制代码

let [age,setAge]=useState(0); // 0是变量age的初始值

异步渲染

setState是异步指定的。也就是setAge是异步执行的。
执行但不是立刻渲染，而是进入到微任务队列。注意分清执行和渲染是两回事。

javascript 复制代码

function App() {
    let [age, setAge] = useState(0);
    useEffect(()=>{
        console.log("use effect:", age);
    })
    let addAge = () => {
        setTimeout(()=>{
            console.log("i am macro task");
        },)
        Promise.resolve().then(()=>{
            console.log("i am micro task ");
        })
        setAge(()=>{
            console.log("where am i ");
            return 10;
        });
        console.log("main task");
    };
    return (
        <div>
            i am {age} years old
            <button onClick={addAge}>add </button>
        </div>

    );
}

export default App;

分析代码和输出

点击按钮，触发addAge函数。

setTimout进入宏任务队列，then进入微任务队列，setAge异步执行，返回10，也就是告诉react，下次把age渲染成10，所以如果在console.log("main task")上加一行，console.log(age)，输出的还是10。
从useEffect的输出顺序来看，大胆猜测react的渲染事件就是进入的微任务队列。因为，use effect：10 在"macro task" 前输出。