服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - React 三大属性之state的使用详解

React 三大属性之state的使用详解

2022-03-02 16:26xiaoznz React

这篇文章主要介绍了React 三大属性之state的使用详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下

React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了。state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染。这里分别介绍一下在类和函数组件中state的写法:

类组件

?
1
2
3
4
5
6
7
8
9
10
class ClassComponent extends React.Component{
    constructor(props){
        super(props)
    } //可写可不写
    render(){
        return (
            //这里面可以写jsx语法
        )
    }
}

setState我们一般用来改变状态,在里面可以直接传一个要改变的对象,也可以传一个回调函数,注意,此时如果传入的是对象的话,React只是做了一层浅拷贝,而不是深拷贝,所以此时如果对象中有其他对象进行了改变React无法知道进行渲染。这个方法本质上是传入了一个新的值,将原先的值进行了覆盖,如果这个值跟原先的值一样,那么React就不会进行渲染。

React为什么要这么麻烦,不能直接修改值?因为在React中,有一个概念叫做可变性。React通过setState中的状态的改变知道哪些地方发生了,于是进行渲染,如果直接改变了state,React无法感知到,所以无法渲染。简单来说,它没有像vue一样双向数据绑定。

类组件中的constructor可写可不写,写上这个构造函数的作用主要有两个:

  • 为了给this.state赋值对象来初始化内部state的值
?
1
2
3
4
5
6
7
8
9
10
11
12
constructor(props){
    super(props)
    this.state = {n:12}
}
 
render(){
    return (
        <div>
                <h1>THE TIME IS {this.state.n}</h1>
        </div>
    )
}

注意这里不能写setState,以上的方法React也可以在外面设定,即

?
1
2
3
4
5
6
7
8
9
state = {n:12}
 
render(){
    return (
        <div>
            <h1>THE TIME IS {this.state.n}</h1>
        </div>
    )
}
  • 为事件处理函数绑定实例
?
1
2
3
4
5
6
7
8
9
10
constructor(props){
    super(props)
    this.addNum = function(){fn()}.bind(this)
}
 
render(){
    return (
        <button onClick={this.addNum}>+1</button>
    )
}

但是这种方法在React中也有新的方法替代了,代码如下:

?
1
2
3
4
5
6
7
8
9
addNum = ()=>{
    fn()
}
 
render(){
    return (
        <button onClick={this.addNum}>+1</button>
    )
}

所以上述的构造函数继承父类的方法根本没有必要写。

函数组件

?
1
2
3
4
5
6
7
import {useState} from "react"
function FunctionComponent(){
    const [data,setData] = useState("你要传入的初始值")
    return (
        <div>SHOW DATA {state}</div>
    )
}

这里的setData的作用跟setState类似,但是它只能用来改变data的状态,需要改变的时候传入一个回调函数。函数的参数是之前的值,返回一个要改变的值。这个方法本质是需要传入一个新的对象,来改变React之前对象的值。 对此还能简便的直接写改变的值,默认会对应到当前对象并且改变它的值
以上方法比原先的setState要简便不少,但是麻烦的是如果有多个数据,需要多次useState而不能一次性传入多个值。不过大多数情况下,数据管理的问题都是交给Redux来管理的,所以并不需要React本身来操心

setState的坑

在改变React组件状态的时候,经常遇到的问题是setState的值合并。看如下问题:

?
1
2
3
4
5
this.addNum = function () {
            this.setState({num:this.state.num+1})
            this.setState({num:this.state.num+1})
            this.setState({num:this.state.num+1})
        }.bind(this)

此时当addNum函数被触发的时候,num只加了1。并没有像我们想象的加了3。 对此,React本身的解释是

调用 setState 其实是异步的 —— 不要指望在调用 setState 之后,this.state 会立即映射为新的值

对此的解释是:

  1. 无论调用多少次setState,都不会立即执行更新。而是将要更新的state存入'_pendingStateQuene',将要更新的组件存入'dirtyComponent';
  2. 当根组件didMount后,批处理机制更新为false。此时再取出'_pendingStateQuene'和'dirtyComponent'中的state和组件进行合并更新;

简单来说,就是React执行时,为了提高性能,会把要更新的setState存入一个数组,当React本身的同步代码执行完毕,更新之前,将数组中的setState取出,然后进去渲染。上述代码中,我们因为将同步代码this.setState({num:this.state.num+1})加入了setState中,所以在批处理取出的时候,会产生合并,将众多的setState合并为一句话,从而只改变了1。因为这个机制,所以让setState像异步代码,但是其实它是同步执行的,此时我们如果将之前的同步代码改成异步的,我们就得到了我们想要的结果

?
1
2
3
4
5
this.addNum = function () {
            setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
            setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
            setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
        }.bind(this)

此时,值直接就加了3,因为异步代码会在代码执行的时候暂存。在所有同步代码执行完毕的时候再执行,此时批处理机制已经结束了,于是三个函数都被执行了,于是加了3 这是目前为止能想到的,如果以后有新的还会增加

以上就是React 三大属性之state的使用详解的详细内容,更多关于React 三大属性之state的资料请关注服务器之家其它相关文章!

原文链接:https://juejin.cn/post/6950500180147994660

延伸 · 阅读

精彩推荐
  • Reactreact项目从新建到部署的实现示例

    react项目从新建到部署的实现示例

    这篇文章主要介绍了react项目从新建到部署的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们...

    juejin9462022-01-21
  • ReactReact获取input值并提交的2种方法实例

    React获取input值并提交的2种方法实例

    这篇文章主要给大家介绍了关于React获取input值并提交的2种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    GuanJdoJ9522022-03-01
  • ReactReact+Koa实现文件上传的示例

    React+Koa实现文件上传的示例

    这篇文章主要介绍了React+Koa实现文件上传的示例,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下...

    孤雨随风zz4232022-02-23
  • React基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    这篇文章主要介绍了基于react hooks,zarm组件库配置开发h5表单页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,...

    记忆的森林4112022-02-23
  • ReactReactRouter的实现方法

    ReactRouter的实现方法

    这篇文章主要介绍了ReactRouter的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    WindrunnerMax6212022-01-06
  • ReactReact.Children的用法详解

    React.Children的用法详解

    这篇文章主要介绍了React.Children的用法详解,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下...

    uuihoo10692022-02-23
  • ReactReact中使用setInterval函数的实例

    React中使用setInterval函数的实例

    这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友...

    哈工大的许政7432022-02-23
  • ReactReact三大属性之props的使用详解

    React三大属性之props的使用详解

    这篇文章主要介绍了React三大属性之props的使用详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下...

    xiaoznz9962022-03-02