react学习笔记之state以及setState的使用

在react中通过 state 以及 setState() 来控制组件的状态。

state

state 是 react 中用来存储组件数据状态的，可以类比成 vue 中的 data。

1.state的作用

state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.

React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.

2.state工作原理

常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的

callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态.

setState()

与 vue 中不同的是 state 不能直接被修改，需要通过 setState() 的方法去修改。

1、setState() 更新组件状态之后不会立即生效，react 为提高性能会按批次更新 state 然后 render, 即异步操作，所以 setSate() 之后立即去取state的值并不是更新之后的状态。

2、setState() 第一个参数接受两种类型的参数，Object以及Function

Object

this.setState({
 msg: '更新state msg'
})

当参数是Object的时候, 可以即为对应 state 中的 key, value 即是新的值。

Function

当参数是函数的时候， setState() 会将上一个 setState() 的结果作为参数传入这个函数

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) // 此时`this.state.counter`的值还是初始值0,，所以这个操作是无效的
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 为上次更新之后的值，即是1
}
...

setState() 第二个参数是一个回调函数，表示 state 更新完成

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

根据这个可以使用Promise以及async/await,封装成同步操作

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state 更新完毕')
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入掌握 react的 setState的工作机制

    react 是单向数据流,若想要改变已有组件的外观,我们只能通过更改组件的 props 或者更新组件的 state.在 react 项目的代码中我们操作最多的就是 this.setState 方法.下面对 setState 方法进行详细的说明. <!--more --> setState要点:react 框架为了提高性能,会对 state 的更新进行收集.合并.再进行一次批量的状态更新.这种机制常常导致一些意想不到的情况. setState 有两种调用形式: 向 setState 传递对象 s

  • 深入研究React中setState源码

    React作为一门前端框架,虽然只是focus在MVVM中的View部分,但还是实现了View和model的绑定.修改数据的同时,可以实现View的刷新.这大大简化了我们的逻辑,只用关心数据流的变化,同时减少了代码量,使得后期维护也更加方便.这个特性则要归功于setState()方法.React中利用队列机制来管理state,避免了很多重复的View刷新.下面我们来从源码角度探寻下setState机制. 1 还是先声明一个组件,从最开始一步步来寻源: class App extends Comp

  • react学习笔记之state以及setState的使用

    在react中通过 state 以及 setState() 来控制组件的状态. state state 是 react 中用来存储组件数据状态的,可以类比成 vue 中的 data. 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作

  • React学习笔记之条件渲染（一）

    前言 在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态).下面就来看看详细的介绍: 条件渲染 可以根据state的值进行组件的条件渲染.例如: function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; }

  • React学习笔记之事件处理（二）

    之前已经给大家介绍了React中的条件渲染(传送门),本文将给大家关于React中事件处理的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别: React的事件名是驼峰的,不是小写的 在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string 举个例子: <button onClick={activateLasers}> Activate Lasers </button> 而

  • React学习笔记之高阶组件应用

    是什么 高阶组件是一个函数,能够接受一个组件并返回一个新的组件.没有任何副作用. 为什么用 封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用. 如何用 //hoc为我们的高阶组件,可以使用es7装饰器语法来使用高阶组件 //当然也可以不用es7,如:let hocHello = hoc(Hello),只是es7的语法更优雅一些. //高阶组件可以叠加使用,可以对一个组件使用多个高阶组件 @hoc class Hello extends React.Component { // } 如何

  • React 组件中的state和setState()你知道多少

    目录 state的基本使用 setState()修改状态 解决方法: 总结 state的基本使用 状态(state)即数据,是组件内部的私有数据,只能在组件内部使用 state的值是对象,可以通过this.state来获取状态. setState()修改状态 状态是可变的,可以通过this.setState({要修改的数据})来改变状态 注意:跟vue语法不同,不要直接修改state中的值,这时错误的! //正确 this.setState({ count:this.state.count+1

  • React学习笔记之列表渲染示例详解

    前言 本文主要给大家介绍了关于React列表渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例详解: 列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}<

  • C#学习笔记之状态模式详解

    C#学习笔记之状态模式详解

    本文通过例题为大家讲解C#学习笔记之状态模式,供大家参考,具体内容如下 题目1:通过代码描述每一天的不同时间段的工作效率 分析: 首先确定,工作状态指正在工作,或者以及下班这些情况,而这些情况所受影响的因素包括:当前时间以及任务是否已经完成.所以在Work中需要两个属性:hour和finish.然后根据这两个属性直接判断当前的工作状态即可. 实现: class Program { static void Main(string[] args) { //紧急项目 Work emergencyPro

  • React学习之JSX与react事件实例分析

    本文实例讲述了React学习之JSX与react事件.分享给大家供大家参考,具体如下: 1.JSX 1.1.表达式 在React中使用JSX来描述HTML页面,而且可以与js混合使用,使用JavaScript表达式时要将表达式包含在大括号里 const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( //将JSX语句保存在变量中 <h1> Hello, {formatName(user)}! {/* {}

  • React学习之受控组件与数据共享实例分析

    React学习之受控组件与数据共享实例分析

    本文实例讲述了React学习之受控组件与数据共享.分享给大家供大家参考,具体如下: 在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会自己储存值,并且根据用户输入进行更新.但在React中,可变的值通常保存在组件的state中,并且只能用 setState() 方法进行更新.为了解决二者的矛盾,可以让HTML元素不再自己储存数据,而使用来自于react的state.也就是说HTML元素把数据保存在react组件的state中,并

  • ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    本文实例讲述了ES6学习笔记之字符串.数组.对象.函数新增知识点.分享给大家供大家参考,具体如下: 1.模板字符串 反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来 let str=` <!DOCTYPE html> <html lang="en"> <body> <div> <p class="pClass">格式化字符串</p> </div> <

随机推荐