前言
我是歌谣 我有个兄弟 巅峰的时候排名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;
