setstate的基本使用

已于 2023-02-20 14:21:00 修改
阅读量242 收藏
点赞数 1
分类专栏： 面试题 文章标签： react.js
于 2023-02-20 14:18:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72127453/article/details/129123426
版权

setstate的基本使用

什么是setState

• 一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state, 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用

setState函数介绍

第一个参数可以是一个对象，或者是一个函数，
第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据

setState更新方式

同步更新：原生dom事件
异步更新：合成事件

setState是同步还是异步

• setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据
• 在使用setState更新数据的时候，setState的更新类型分成：同步更新，异步更新
• 在组件生命周期或React合成事件中，setState是异步
• 在setTimeout或者原生dom事件中，setState是同步
• 对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果

调和阶段setState干了什么

  • 首先将传递给setState的对象合并到组件的当前状态，开始进行和解
  • 随后React将构建一个新的React元素树
  • 为了弄清 UI 如何响应新的状态而改变，React 会利用diff算法将这个新元素树与旧元素树进行比较
  • 通过比较，React知道了发生的确切变化并进行更新 最终达到了最小化UI的占用空间的优化效果
setState()的使用方法
qq_41759751的博客
03-31 914
对象式：setState(stateChange,callback)——新状态不依赖于原状态。 函数式：setState((state,props)=>stateChange,callback)——新状态依赖于原状态。 ——stateChange：状态改变对象，只包含改变的内容。 ——callback：可选的回调函数，在状态更新完毕并且页面也更新完毕（render()）后调用，可以用于获取最新的状态数据。 setState()更新状态是异步的还是同步的？ 1、在react控制的回调函数
setState的写法
richest_qi的博客
05-31 2176
文章目录计数器案例模板文件index.html入口文件index.js入口组件App.jsCounter/index.jsx（Counter组件）对象式写法setState({})setState({},callback)函数式写法setState((state,props) => {})setState((state,props) => {},callback) setState()有以下两种写法， 对象式写法。如：setState({})或者setState({},callback)。 函
在React项目中使用TypeScript(持续更新)
weixin_41141849的博客
02-01 433
安装脚手架 npm install -g create-react-app 创建项目 create-react-app proName --typescript 小试牛刀 可以把ts的代码注释查看编译器报错提示 Class组件 src文件夹下创建pages/home/Home.tsx import React, { Component } from "react"; // 规定p...
React有状态和无状态组件,State和SetState基本使用
2401_84093019的博客
05-13 257
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
React学习（三）（setState的使用，state的简写）
qq_52551375的博客
01-24 566
1.箭头函数： ES6 中声明函数的一种方式，更简短的函数并且不绑定 this。4.复习类中添加属性（不必写在构造器中，可直接添加）至此，已经实现了点击切换状态。2.复习类中的this指向。3.setState的使用。5.state总结【简写】
React 中setState的使用总结
麦子的博客
04-16 954
1、基本使用方法 //主要用于更新用户界面、响应事件处理和服务器响应 setState(updater, [callback]) //(state, props) => stateChange // typeof stateChange == 'object' 方式1: setState(state=>{ return {key : value} }) 等价于 ...
深入 setState 机制
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-11 1669
React 是通过管理状态来实现对组件的管理，即使用 this.state 获取 state，通过 this.setState() 来更新 state，当使用 this.setState() 时，React 会调用 render 方法来重新渲染 UI。 首先看一个例子： class Example extends React.Component { constructor() { su...
React的setState
qq_42774794的博客
03-27 821
setState()将对组件 state 的更新排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式setState()并不总是立即更新组件。它会批量推迟更新。这使得在调用setState()后立即读取this.state成为了隐患。为了消除隐患，请使用或者setState的回调函数（），这两种方式都可以保证在应用更新后触发除非返回false，否则setState()将始终执行重新渲染操作。
React 中 setState 使用注意事项
诗渊的博客
02-29 1191
1. 不能直接设置this.state 这个基本学习过 react 的读者都不会犯这样的错，直接设置 this.state 的值并不能触发组件 render(),正确的是调用 setState() 函数来处理。 2. setState() 回调函数 我们在用 setState() 时，疑惑比较多的地方就是 setState() 可能不会立即生效。基于这一点，慢慢地我们就形成了 setState()...
React的基本使用&JSX的基本使用&React组件&事件处理State&setState&事件绑定this指向
fengzitaba的博客
08-05 1100
React的基本使用 React的安装 安装命令:npm i react react-dom react包是核心,提供创建元素,组件等功能 react-dom 提供DOM相关功能 React的使用 1.引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/rea
setState是同步还是异步
浅听记忆的博客
09-03 3194
关于setState附上官网地址一份 setState描述 其实探讨是否是同步还是异步这个问题很好理解 能紧随其后拿到结果的可以认为同步（简单理解哈，一些场景暂不考虑，当然有一些属于异步的但是异步任务刚好都结束了，直接拿到了对应的结果） ...
react 学习(五) 完善 setState 及实现 ref
weixin_41364787的博客
04-12 166
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二参数作为回调函数。我们先把上一节的工作收个尾再介绍 ref 的实现。 完善 setState 立即执行 我们在代码中实现如下逻辑，传入函数，我们需要修改一下 getState 方法 this.setState((state) => ({ number: state.number + 1 })); this.setState((state) =&
深入理解 React 的 setState
weixin_46803507的博客
05-06 239
深入理解 React 的 setState前言參考正文setState 到底是同步還是異步的？setState 原理結語 前言 這篇來探討一個 react 中很基本的東西，setState，探討這個一方面其實也是打好 react 的基礎，另一方面是因為我自己拿來練手的 side-project 確實用到 setState，但是卻遇到了一個 bug，我思索應該就是 setState 的問題，沒有理解透徹。因此趕緊來學習這個東西，好掌握這個知識點。前情提要一下，這篇真的頗長，沒耐心地趕緊換篇看，不過對於認真看完
React 源码学习01 ---- React.Children.map 的实现与应用
止于至善
11-07 322
目前是第一次看这个函数的实现，知道他大概干了什么，也大概明白每一步要干什么，但是目前还不清除他为什么要这么干。为什么要来看他的实现呢？一个是只有知道他是怎么实现的，才能知道在调用这个方法时，那些情况会报错，为什么报错，能够快速处理。使用这个方法开发功能的时候能够更加得心应手。
【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播
止于至善
11-07 131
组件的实现其实没有太大的难度，就是最近看源码，看到了 React.Children.map 的实现，因此使用这个效果用一下；需要注意的是隐藏显示不要直接操作DOM的显示隐藏，因为DOM的改变会导致图片的重新加载，会出现闪动的效果，这是回流导致的图片重新加载；在组件内渲染子组件的时候依然需要使用 React.Children.map 来循环子组件。
【react】React Router基础知识
最新发布
stay hungry, stay foolish
11-07 215
通过浏览器地址栏的切换，可以实现不同组件之间的切换。进一步将组件单独抽离：/index.js。
Redux的简介及其在React中的应用
qq_45569925的博客
11-07 508
react-redux负责把Redux和React 链接 起来，内置 Provider组件 通过 store 参数把创建好的store实例注入到应用中，链接正式建立。store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store。可以直接把count值修改到对应的数字，目标count值是在组件中传递过去的，需要在。在React组件中使用store中的数据，需要用到一个 钩子函数 -单独封装一个函数，在函数内部return一个新函数，在新函数中；
react搭建router，redux教程
m0_74079648的博客
11-04 906
/ 定义仓库// 引入configureStore 定义仓库// 导入counterSlice// 导出// 数据处理reducer: {counter});/** @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE*/// 定义仓库。
react组件02
qq_36022463的博客
11-04 862
setState是异步的，会将对象加入一个队列，在一定的时间之后进行统一渲染，，，所以多次调用setState去累加某一个值，是会有问题的。react组件中，，state中的数据，是不可变的，，不要去随意改变state中的数据，，而是浅拷贝一个新的值，修改之后去赋值。react中会设置一个根组件，下面的子元素默认都是在这个根组件下面的，，， 在处理，对话框，提示框，固定定位元素的时候非常有用。高阶组件，本身不是一个组件，是一个函数，，并且这个函数的参数是另一个组件，，返回值也是一个组件。
MFC基础控件使用详解：按钮控件
"MFC基本控件使用教程" 在Windows应用程序开发中，MFC（Microsoft Foundation Classes）库提供了丰富的控件支持，使开发者能够构建功能丰富的图形用户界面。本资源聚焦于“基本控件使用(MFC)”，涵盖控件在可视化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值