Skip to main content

moregeek program

#yyds干货盘点# react笔记之学习之state注意事项-多极客编程

前言

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

©著作权归作者所有:来自51CTO博客作者前端歌谣的原创作品,请联系作者获取转载授权,否则将追究法律责任

#yyds干货盘点# react笔记之学习之useref()和dom对象-多极客编程

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

#yyds干货盘点#聊聊vuex的mutations和actions-多极客编程

首先讲讲版本问题,如果使用​​vue-cli2​​模版搭建的基础项目,注意,如果使用​​vue​​版本是2,当你你默认安装​​vuex​​肯定是​​4.x​​版本了,这里需要注意的是,你要降低​​vuex​​版本到​​3.x​​版本,不然​​store​​挂载不到​​vue​​上mutation当我们修改数据,只能通过​​mutation​​修改​​state​​import Vue from '

#yyds干货盘点#js数据类型判断几种方式-多极客编程

 一般JS检测数据类型有4 种方法:typeof、constructor、instanceof 和 Object.prototype.toString,相信大家也对这几种判断很熟悉,下面我再罗列两种,供各位使用。​typeof:检测基础数据类型和函数很好用typeof 应该是我学习到的第一个 JS 的方法,也是使用频率最高的一个用来检测数据类型的方法。它能准确判断出的数据类型有:Number,St

#yyds干货盘点#node.js链接mongodb数据库-多极客编程

在这之前确保当前环境下安装了mongodb的模块,且mongodb数据库已经启动,安装mongodb模块到当前目录可以通过yarn add mongodb我此时安装的是v4.1.4版本的mongodb常见的连接方法const { MongoClient } = require('mongodb')const url = "mongodb://localhost:27017"const dbName

canvas 10款基础滤镜(原理篇)-多极客编程

本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 在学习 Canvas 的路上大概率会了解到 滤镜 ,这是个很有趣的东西。 用 Canvas 开发滤镜需要对几何数学、颜色的理解等领域都有一定基础。 但先别关掉文章,没基础也没关系,不是还可以复制粘贴吗?(像极了正则表达式) <br> 我在学习的过程中也尝试过写一些简单的滤镜,也收集过很多滤镜。但由于历史有点久远了,我

angular 模块封装概念常见的错误理解-多极客编程

Angular 以类似于 ES 模块的方式引入了模块封装的概念。 它基本上意味着可声明的类型——组件、指令和管道——只能由在该模块内声明的组件使用。 例如,如果我尝试使用下面的代码在 App 模块的 App 组件内使用 A 模块中的 a-comp: @Component({ selector: 'my-app', template: ` Hello {{name}}

#yyds干货盘点# react笔记之学习之useref()和dom对象-多极客编程

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

#yyds干货盘点#聊聊vuex的mutations和actions-多极客编程

首先讲讲版本问题,如果使用​​vue-cli2​​模版搭建的基础项目,注意,如果使用​​vue​​版本是2,当你你默认安装​​vuex​​肯定是​​4.x​​版本了,这里需要注意的是,你要降低​​vuex​​版本到​​3.x​​版本,不然​​store​​挂载不到​​vue​​上mutation当我们修改数据,只能通过​​mutation​​修改​​state​​import Vue from '

#yyds干货盘点#js数据类型判断几种方式-多极客编程

 一般JS检测数据类型有4 种方法:typeof、constructor、instanceof 和 Object.prototype.toString,相信大家也对这几种判断很熟悉,下面我再罗列两种,供各位使用。​typeof:检测基础数据类型和函数很好用typeof 应该是我学习到的第一个 JS 的方法,也是使用频率最高的一个用来检测数据类型的方法。它能准确判断出的数据类型有:Number,St

那些你不知道的炫酷开关交互效果(12种)-多极客编程

本文将继续更新那些炫酷交互效果系列文章,今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图,总计收集12款不同交互效果,相信总有一款适合你。 那些你不知道的炫酷交互效果系列: 那些你不知道的炫酷按钮交互效果 那些你不知道的炫酷导航交互效果 那些你不知道的炫酷开关交互效果 效果1 基于普通的开关效果增加了向内部延伸的3D效果,核心是通过设置内阴影box-sh

#yyds干货盘点#node.js链接mongodb数据库-多极客编程

在这之前确保当前环境下安装了mongodb的模块,且mongodb数据库已经启动,安装mongodb模块到当前目录可以通过yarn add mongodb我此时安装的是v4.1.4版本的mongodb常见的连接方法const { MongoClient } = require('mongodb')const url = "mongodb://localhost:27017"const dbName

thingsboard前端项目的安装与启动-多极客编程

前言 ThingsBoard是目前Github上最流行的开源物联网平台(12.8k Star),可以实现物联网项目的快速开发、管理和扩展, 是中小微企业物联网平台的不二之选。 本文介绍在Windows环境,ThingsBoard前端项目的安装部署与如何配置后台服务启动。 安装部署 首先我们需要准备所需的项目与环境。 开源项目 开源项目ThingsBoard我使用的是较新的3.4.1版本:http