React.js 小书 Lesson10 - 组件的 state 和 setState
- 作者:胡子大哈
- 原文链接: http://huziketang.com/books/react/lesson10
- 转载请注明出处,保留原文链接和作者信息。
state
我们前面提到过,一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态,就像一个点赞按钮,可以有“已点赞”和“未点赞”状态,并且可以在这两种状态之间进行切换。React.js 的 state
就是用来存储这种可变化的状态的。
我们还是拿点赞按钮做例子,它具有已点赞和未点赞两种状态。那么就可以把这个状态存储在 state 中。修改 src/index.js
为:
import React, { Component } from 'react'
import ReactDOM from 'react-dom' import './index.css' class LikeButton extends Component { constructor () { super() this.state = { isLiked: false } } handleClickOnLikeButton () { this.setState({ isLiked: !this.state.isLiked }) } render () { return ( <button onClick={this.handleClickOnLikeButton.bind(this)}> {this.state.isLiked ? '取消' : '点赞'} ? </button> ) } } ...
isLiked
存放在实例的 state
对象当中,这个对象在构造函数里面初始化。这个组件的 render
函数内,会根据组件的 state
的中的isLiked
不同显示“取消”或“点赞”内容。并且给 button
加上了点击的事件监听。
最后构建一个 Index
,在它的 render
函数内使用 LikeButton
。然后把 Index
渲染到页面上:
...
class Index extends Component {render () {return (<div><LikeButton /> </div> ) } } ReactDOM.render( <Index />, document.getElementById('root') )
setState 接受对象参数
在 handleClickOnLikeButton
事件监听函数里面,大家可以留意到,我们调用了 setState
函数,每次点击都会更新 isLiked
属性为 !isLiked
,这样就可以做到点赞和取消功能。
setState
方法由父类 Component
所提供。当我们调用这个函数的时候,React.js 会更新组件的状态 state
,并且重新调用 render
方法,然后再把 render
方法所渲染的最新的内容显示到页面上。
注意,当我们要改变组件的状态的时候,不能直接用 this.state = xxx
这种方式来修改,如果这样做 React.js 就没办法知道你修改了组件的状态,它也就没有办法更新页面。所以,一定要使用 React.js 提供的 setState
方法,它接受一个对象或者函数作为参数。
传入一个对象的时候,这个对象表示该组件的新状态。但你只需要传入需要更新的部分就可以了,而不需要传入整个对象。例如,假设现在我们有另外一个状态 name
:
...constructor (props) {super(props)this.state = {name: 'Tomy',isLiked: false } } handleClickOnLikeButton () { this.setState({ isLiked: !this.state.isLiked }) } ...
因为点击的时候我们并不需要修改 name
,所以只需要传入 isLiked
就行了。Tomy 还是那个 Tomy,而 isLiked
已经不是那个 isLiked
了。
setState 接受函数参数
这里还有要注意的是,当你调用 setState
的时候,React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面,稍后才会从队列当中把新的状态提取出来合并到 state
当中,然后再触发组件更新。这一点要好好注意。可以体会一下下面的代码:
...handleClickOnLikeButton () {console.log(this.state.isLiked)this.setState({isLiked: !this.state.isLiked }) console.log(this.state.isLiked) } ...
你会发现两次打印的都是 false
,即使我们中间已经 setState
过一次了。这并不是什么 bug,只是 React.js 的 setState
把你的传进来的状态缓存起来,稍后才会帮你更新到 state
上,所以你获取到的还是原来的 isLiked
。
所以如果你想在 setState
之后使用新的 state
来做后续运算就做不到了,例如:
...handleClickOnLikeButton () {this.setState({ count: 0 }) // => this.state.count 还是 undefinedthis.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN } ...
上面的代码的运行结果并不能达到我们的预期,我们希望 count
运行结果是 3
,可是最后得到的是 NaN
。但是这种后续操作依赖前一个 setState
的结果的情况并不罕见。
这里就自然地引出了 setState
的第二种使用方式,可以接受一个函数作为参数。React.js 会把上一个 setState
的结果传入这个函数,你就可以使用该结果进行运算、操作,然后返回一个对象作为更新 state
的对象:
...handleClickOnLikeButton () {this.setState((prevState) => {return { count: 0 } }) this.setState((prevState) => { return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0,当前返回 1 }) this.setState((prevState) => { return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1,当前返回 3 }) // 最后的结果是 this.state.count 为 3 } ...
这样就可以达到上述的利用上一次 setState
结果进行运算的效果。
setState 合并
上面我们进行了三次 setState
,但是实际上组件只会重新渲染一次,而不是三次;这是因为在 React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的 setState
都进行合并以后再重新渲染组件。
深层的原理并不需要过多纠结,你只需要记住的是:在使用 React.js 的时候,并不需要担心多次进行 setState
会带来性能问题。
课后练习
- 不能摸的狗(二)
因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 React.js 小书的论坛 发帖,我会回答大家的疑问。
转载于:https://www.cnblogs.com/huzidaha/p/7813373.html
React.js 小书 Lesson10 - 组件的 state 和 setState相关推荐
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson18 转载请注 ...
- React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson2 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接: http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋 ...
- React.js 小书 Lesson27 - 实战分析:评论功能(六)
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...
- React.js 小书 Lesson15 - 实战分析:评论功能(二)
作者:胡子大哈 原文链接: http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善 ...
- React.js 小书 Lesson14 - 实战分析:评论功能(一)
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈 本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
- React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
- [react] 在React中组件的state和setState有什么区别?
[react] 在React中组件的state和setState有什么区别? state:初始化状态 setState:对状态进行更新 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
最新文章
- CentOS7 SSH相关
- 五、Hive架构,安装和基本使用
- 从 Spark Streaming 到 Apache Flink : 实时数据流在爱奇艺的演进
- 颠覆教科书:打破50年来的认知,DNA同义突变会影响蛋白质折叠,进而影响细胞生长...
- Pacemaker 安装与使用
- delphi 发送网络消息_分布式系统与消息的投递
- 2021计算机考研总结即经验贴(初试、复试、调剂、心态调整)
- 像素和厘米怎么换算_像素 amp;amp; 分辨率的那段剪不断理还乱的关系
- 第三方SSD问题引起电脑频繁重启问题IONVMeController.cpp:5499
- 大数据、物联网技术、物联网卡,对我们生活带来的影响
- 美丽杭州,魅力杭州:弘阳地产水城新时代
- 【软件构造】正则表达式合法性检测
- 用什么软件测试内存条稳定,使用内存条检测工具监测内存稳定性,内存条检测工具有哪些...
- Excel表格自动汇总,sheet搬迁,数据汇总,多个工作簿、多个sheet页内数据汇总
- 机器学习笔记 - 单位矩阵和逆矩阵
- 【Python】如何生成柯西分布随机数
- re模块与正则表达式 1
- 30系列显卡使用tensorflow1版本
- 初探视频原理和FFmpeg
- 如何用uni-app做一个领优惠券H5、小程序商城(一)
热门文章
- [转]解决Sublime Text 2中文显示乱码问题
- window.showModalDialog用法
- 文本生成系列之transformer结构扩展(二)
- 新Attention | NAM,一种新的注意力计算方式,无需额外的参数
- AAAI-22 预征稿通知
- 深度学习下,中文分词是否还有必要?——ACL 2019论文阅读笔记
- 【ACL2019】轻松了解张岳实验室的六篇paper
- 推荐 | 自然语言处理、计算机视觉等机器学习实战项目练手平台
- 【揭秘】我几乎面了所有知名公司的算法岗位
- 深度学习TF—10.循环神经网络RNN及其变体LSTM、GRU实战