#yyds干货盘点# react笔记之学习之state注意事项

Posted 2022-12-15

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

state注意事项

/*
* state
* - state实际就是一个被React管理的变量
* 当我们通过setState()修改变量的值时，会触发组件的自动重新渲染
* - 只有state值发生变化时，组件才会重新渲染
* - 当state的值是一个对象时，修改时是使用新的对象去替换已有对象
* - 当通过setState去修改一个state时，并不表示修改当前的state
* 它修改的是组件下一次渲染时state值
* - setState()会触发组件的重新渲染，它是异步的
* 所以当调用setState()需要用旧state的值时，一定要注意
* 有可能出现计算错误的情况
* 为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值
*
* */

代码案例

import ./App.css;
import useState from "react";

const App = () => 

    console.log(函数执行了 ---> 组件创建完毕！);
    /*
    *   state
    *     - state实际就是一个被React管理的变量
    *         当我们通过setState()修改变量的值时，会触发组件的自动重新渲染
    *     - 只有state值发生变化时，组件才会重新渲染
    *     - 当state的值是一个对象时，修改时是使用新的对象去替换已有对象
    *     - 当通过setState去修改一个state时，并不表示修改当前的state
    *         它修改的是组件下一次渲染时state值
    *     - setState()会触发组件的重新渲染，它是异步的
    *           所以当调用setState()需要用旧state的值时，一定要注意
    *           有可能出现计算错误的情况
    *           为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值
    *
    * */


    const [counter, setCounter] = useState(1);
    const [user, setUser] = useState(name: 孙悟空, age: 18);

    const addHandler = () => 
        setTimeout(() => 
            // setCounter(counter + 1); // 将counter值修改为2
            setCounter((prevCounter)=>

                /*
                *   setState()中回调函数的返回值将会成为新的state值
                *       回调函数执行时，React会将最新的state值作为参数传递
                * */
                return prevCounter + 1;
            );

            // setCounter(prevState => prevState + 1);
        , 1000);

        // setCounter(2);
        // setCounter(3);
        // setCounter(4);
        // setCounter(5);
        // setCounter(6);
    ;

    const updateUserHandler = () => 
        // setUser(name:猪八戒);

        // 如果直接修改旧的state对象，由于对象还是那个对象，所以不会生效
        // user.name = 猪八戒;
        // console.log(user);
        // setUser(user);

        // const newUser = Object.assign(, user);
        // newUser.name = 猪八戒;
        // setUser(newUser);

        setUser(...user, name: 猪八戒);


    ;

    return <div className=app>
        <h1>counter -- user.name -- user.age</h1>
        <button onClick=addHandler>1</button>
        <button onClick=updateUserHandler>2</button>
    </div>;
;

// 导出App
export default App;