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

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

目录
  • 类组件
  • 函数组件
  • setState的坑

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就不会进行渲染。

类组件中的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

本文链接：https://my.lmcjl.com/post/15459.html

展开阅读全文

相关文章

4 评论

留下您的评论.