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

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

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;
相关文章
|
8天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
1月前
|
存储 前端开发 API
第六章 react组件实例中三大属性之State
第六章 react组件实例中三大属性之State
|
6天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
1月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。
64 2
|
1月前
|
前端开发
「React」很多人在滥用 state
「React」很多人在滥用 state
|
2月前
|
存储 前端开发
react中 state和props的区别
react中 state和props的区别
15 0
|
2月前
|
前端开发 JavaScript API
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
27 0
|
2月前
|
前端开发
React State(状态)
React State(状态)
|
2月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
25 1

相关产品

  • 云迁移中心