React.js 小书 Lesson10 - 组件的 state 和 setState

tyheist 发布于2019-08-21 17:33 / 919人阅读

摘要：传入一个对象的时候，这个对象表示该组件的新状态。下一节中我们将介绍小书配置组件的。

React.js 小书 Lesson10 - 组件的 state 和 setState

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson10

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

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 (
      
    )
  }
}
...

isLiked 存放在实例的 state 对象当中，这个对象在构造函数里面初始化。这个组件的 render 函数内，会根据组件的 state 的中的isLiked不同显示“取消”或“点赞”内容。并且给 button 加上了点击的事件监听。

最后构建一个 Index ，在它的 render 函数内使用 LikeButton 。然后把 Index 渲染到页面上：

...
class Index extends Component {
  render () {
    return (
      
        
      
    )
  }
}

ReactDOM.render(
  ,
  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 还是 undefined
    this.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 小书 Lesson11 - 配置组件的 props》。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89664.html

React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作

摘要：一个组件的显示形态由多个状态决定的情况非常常见。我们顺利地消除了手动的操作。非一般的暴力，因为每次都重新构造新增删除元素，会导致浏览器进行大量的重排，严重影响性能。下一节小书前端组件化三抽象出公共组件类我们把这个通用模式抽离到一个类当中。 React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作本文作者：胡子大哈本文原文：http://huziketang....

Drinkey 2019-08-21 17:32 评论0 收藏0
React.js 小书 Lesson15 - 实战分析：评论功能（二）

摘要：例如，上面设置了的为，在中被初始化为空字符串。如何向传递的数据父组件只需要通过给子组件传入一个回调函数。当用户点击发布按钮的时候，调用中的回调函数并且将传入该函数即可。下一节中我们将介绍小书实战分析评论功能三。 React.js 小书 Lesson15 - 实战分析：评论功能（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...

siberiawolf 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）

摘要：多次的隐藏和显示会让重新构造和销毁组件，每次构造都会重新构建一个定时器。而销毁组件的时候没有清除定时器，所以你看到报错会越来越多。例如清除该组件的定时器和其他的数据清理工作。下一节中我们将介绍小书更新阶段的组件生命周期。 React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/re...

Dogee 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 评论0 收藏0
React.js 小书 Lesson11 - 配置组件的 props

摘要：默认配置上面的组件默认配置我们是通过操作符来实现。但这并不意味着由决定的显示形态不能被修改。组件可以在内部通过获取到配置参数，组件可以根据的不同来确定自己的显示形态，达到可配置的效果。下一节中我们将介绍小书。 React.js 小书 Lesson11 - 配置组件的 props 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesso...

xiangzhihong 2019-08-21 17:33 评论0 收藏0