脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React   State 组件

React 组件中 State 的定义、使用及正确使用方式

 更新时间：2024年11月21日 09:35:24   作者：前端青山  
本文详细介绍了React组件中的state概念,包括其定义、使用方式以及如何正确更新state,通过ES6和ES7类组件的示例,展示了如何在React中定义和使用state,感兴趣的朋友跟随小编一起看看吧

前言

在 React 应用开发中，state 是组件内部用来存储和管理数据的关键概念。它允许组件根据不同的状态展示不同的 UI。本文将详细介绍 state 的定义、使用方式以及如何正确地更新 state，帮助开发者更好地理解和运用这一核心特性。

1.1 state及其特点

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件

不要直接修改state：构造函数是唯一可以给 this.state 赋值的地方。

state更新可能是异步的：出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

state更新会被合并：当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state

1.2 state的定义和使用

目前react中的状态有两种使用方式：

1.2.1 es6的类 - 构造函数

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
import App from './09-App-state-es6'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)

src/09-App-state-es6.jsx

import React, { Component } from 'react';
​
/**
 * ES6 规定，子类必须在constructor()方法中调用super()，否则就会报错。
这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。
如果不调用super()方法，子类就得不到自己的this对象。
​
 ES5 的继承机制，是先创造一个独立的子类的实例对象，
 然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。
 ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，
 然后再将该对象作为子类的实例，即“继承在前，实例在后”
 */
class App extends Component {
  // es6的类 - 构造函数
  constructor (props) {
    super(props) // 调用父类的constructor(props)
    this.state = { // 添加子类自己的实例属性和方法,在react中 state作为初始化状态的属性
      date: new Date()
    }
  }
  render() {
    return (
      <div>
        现在的时间是：{ this.state.date.toLocaleDateString()  + this.state.date.toLocaleTimeString() }
      </div>
    );
  }
}
​
export default App;

1.2.2 es7的类 - 属性初始化器

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
import App from './10-App-state-es7'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)

src/10-App-state-es7.jsx

import React, { Component } from 'react';
​
// 推荐写法
class App extends Component {
  state = { // es7 类的属性
    date: new Date()
  }
  render() {
    return (
      <div>
        现在的时间是：{ this.state.date.toLocaleDateString()  + this.state.date.toLocaleTimeString() }！！！
      </div>
    );
  }
}
​
export default App;

1.3 如何正确的修改state

setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式.

将 setState() 视为请求而不是立即更新组件的命令。为了更好的感知性能，React 会延迟调用它，然后通过一次传递更新多个组件。

setState() 并不总是立即更新组件。它会批量推迟更新。这使得在调用 setState() 后立即读取 this.state 成为了隐患。为了消除隐患，请使用 componentDidUpdate 或者 setState 的回调函数（setState(updater, callback)），这两种方式都可以保证在应用更新后触发。

记住修改状态的三大原则：

不要直接修改 State

state = { a: 10 }
this.state.a = 100 // ❌

state 的更新可能是异步的

state = { a: 10 }
this.setState({a: this.state.a + 1 })
this.setState({a: this.state.a + 1 })
this.setState({a: this.state.a + 1 })
console.log(this.state.a) // 10

state 的更新会被合并

1.4 this.setState()方法及其特点

setState() 会对一个组件的 state 对象安排一次更新。当 state 改变了，该组件就会重新渲染。

setState()可以添加两个参数,

setState() 的第二个参数为可选的回调函数，它将在 setState 完成合并并重新渲染组件后执行

1.4.1 传递函数

参数一为带有形式参数的 updater 函数：

this.setState((state, props) => stateChange[, callback] )

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
// import App from './10-App-state-es7'
import App from './11-App-setState-function'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)

src/11-App-setState-function.jsx

import React, { Component } from 'react';
​
class App extends Component {
  state = {
    count: 100
  }
  render() {
    return (
      <div>
        { this.state.count }
        <button onClick={ () => {
          this.setState((state, props) => {
            console.log(state, props)
            return {
              count: state.count + 1
            }
          })
          this.setState((state, props) => {
            console.log(state, props)
            return {
              count: state.count + 1
            }
          })
          this.setState((state, props) => {
            console.log(state, props)
            return {
              count: state.count + 1
            }
          })
        } }>加</button>
      </div>
    );
  }
}
​
export default App

updater 函数中接收的 state 和 props 都保证为最新。updater 的返回值会与 state 进行浅合并。

1.4.2 传递对象

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
// import App from './10-App-state-es7'
// import App from './11-App-setState-function'
import App from './12-App-setState-object'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)

src/12-App-setState-object.jsx

import React, { Component } from 'react';
// 为什么？
// const obj = { a: 100 }
// es6 中对象合并
// const newObj = Object.assign(obj, {a: 100 + 1}, {a: 100 + 1}, {a: 100 + 1})
// console.log(newObj) // { a: 101 }
​
class App extends Component {
  state = {
    count: 10
  }
  render() {
    return (
      <div>
        { this.state.count }
        <button onClick={ () => {
          this.setState({
            count: this.state.count + 1
          })
          this.setState({
            count: this.state.count + 1
          })
          this.setState({
            count: this.state.count + 1
          })
          console.log(this.state.count)
        } }>加</button>
      </div>
    );
  }
}
​
export default App;

这种形式的 setState() 是异步的，并且在同一周期内会对多个 setState 进行批处理,相当于

Object.assign(
prevState,
{count: this.state.count + 1},
{count: this.state.count + 1},
...
)

后调用的 setState() 将覆盖同一周期内先调用 setState 的值，因此商品数仅增加一次。如果后续状态取决于当前状态,建议使用 updater 函数的形式代替（前面案例已经实现）。或者在第二个参数中再继续操作。

src/index.js

import React from 'react'
import ReactDOM  from 'react-dom/client'
​
// 引入时，后缀名可以省略，可以在webpack中配置
// import App from './01-App-parent-child'
// import App from './02-App-parent-child-value'
// import App from './03-App-parent-child-value-default'
// import App from './04-App-parent-child-value-default-type'
// import App from './05-App-props-children'
// import App from './06-App-mutiple-props-children'
// import App from './07-App-mouse-tracker'
// import App from './08-App-render-props'
// import App from './09-App-state-es6'
// import App from './10-App-state-es7'
// import App from './11-App-setState-function'
// import App from './12-App-setState-object'
import App from './13-App-setState-callback'
​
const root = ReactDOM.createRoot(document.getElementById('root'))
​
root.render(<App />)

src/13-App-setState-callback.jsx

import React, { Component } from 'react';
​
​
class App extends Component {
  state = {
    count: 10
  }
  render() {
    return (
      <div>
        { this.state.count }
        <button onClick={ () => {
          this.setState({
            count: this.state.count + 1
          }, () => {
            this.setState({
              count: this.state.count + 1
            }, () => {
              this.setState({
                count: this.state.count + 1
              })
            })
          })
          console.log(this.state.count) // 10
        } }>加</button>
      </div>
    );
  }
}
​
export default App;

思考题：

1.何时以及为什么 setState() 会批量执行？

2.为什么不直接更新 this.state？

总结

通过本文的介绍，我们了解了 state 在 React 组件中的重要性，以及如何在 ES6 和 ES7 类组件中定义和使用 state。同时，我们还探讨了正确更新 state 的方法，包括使用 setState() 方法时需要注意的事项。遵循这些最佳实践，可以帮助我们避免常见的陷阱，提高应用的性能和可靠性。

到此这篇关于React 组件中 State 的定义、使用及正确更新方式的文章就介绍到这了,更多相关React State 组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React引入css的三种方式小结

    React引入css的三种方式小结

    这篇文章主要介绍了React引入css的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • GraphQL在react中的应用示例详解

    GraphQL在react中的应用示例详解

    这篇文章主要为大家介绍了GraphQL在react中的应用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • 关于React动态修改元素样式的三种方式

    关于React动态修改元素样式的三种方式

    这篇文章主要介绍了关于React动态修改元素样式的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • React+echarts (echarts-for-react) 实现中国地图及省份切换功能

    React+echarts (echarts-for-react) 实现中国地图及省份切换功能

    这篇文章主要介绍了React+echarts (echarts-for-react) 画中国地图及省份切换,有足够的地图数据，可以点击到街道，示例我只出到市级，本文结合实例代码给大家介绍的非常详细需要的朋友可以参考下
    2022-11-11
  • react中useState改变值不渲染的解决方式

    react中useState改变值不渲染的解决方式

    这篇文章主要介绍了react中useState改变值不渲染的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 解决React报错Expected `onClick` listener to be a function

    解决React报错Expected `onClick` listener to be a function

    这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React合成事件及Test Utilities在Facebook内部进行测试

    React合成事件及Test Utilities在Facebook内部进行测试

    这篇文章主要介绍了React合成事件及Test Utilities在Facebook内部进行测试，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React实现路由鉴权的实例详解

    React实现路由鉴权的实例详解

    React应用中的路由鉴权是确保用户仅能访问其授权页面的方式,用于已登录或具有访问特定页面所需的权限,这篇文章就来记录下React实现路由鉴权的流程,需要的朋友可以参考下
    2024-07-07
  • React新文档切记不要滥用Ref

    React新文档切记不要滥用Ref

    这篇文章主要为大家介绍了React新文档滥用Ref出现的问题详解，以及如何正确的使用Ref，有需要的朋友可以借鉴参考下，希望能够有所帮助
    2022-07-07
  • react-native封装插件swiper的使用方法

    react-native封装插件swiper的使用方法

    这篇文章主要介绍了react-native封装插件swiper的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论