React中很多地方需要用到數(shù)據(jù)，這在React中被叫做狀態(tài)，我們需要一個(gè)專門管理狀態(tài)的方法，于是state相關(guān)的就誕生了。state應(yīng)該被要求有兩個(gè)基本功能，一，能夠存儲(chǔ)一定的值，從而能被react使用，二，能夠再它改變的時(shí)候被React監(jiān)聽到并且重新渲染。這里分別介紹一下在類和函數(shù)組件中state的寫法：
類組件
|
1
2
3
4
5
6
7
8
9
10
|
class ClassComponent extends React.Component{ constructor(props){ super(props) } //可寫可不寫 render(){ return ( //這里面可以寫jsx語法 ) }} |
setState我們一般用來改變狀態(tài)，在里面可以直接傳一個(gè)要改變的對(duì)象，也可以傳一個(gè)回調(diào)函數(shù)，注意，此時(shí)如果傳入的是對(duì)象的話，React只是做了一層淺拷貝，而不是深拷貝，所以此時(shí)如果對(duì)象中有其他對(duì)象進(jìn)行了改變React無法知道進(jìn)行渲染。這個(gè)方法本質(zhì)上是傳入了一個(gè)新的值，將原先的值進(jìn)行了覆蓋，如果這個(gè)值跟原先的值一樣，那么React就不會(huì)進(jìn)行渲染。
React為什么要這么麻煩，不能直接修改值？因?yàn)樵赗eact中，有一個(gè)概念叫做可變性。React通過setState中的狀態(tài)的改變知道哪些地方發(fā)生了，于是進(jìn)行渲染，如果直接改變了state,React無法感知到，所以無法渲染。簡(jiǎn)單來說，它沒有像vue一樣雙向數(shù)據(jù)綁定。
類組件中的constructor可寫可不寫,寫上這個(gè)構(gòu)造函數(shù)的作用主要有兩個(gè)：
- 為了給this.state賦值對(duì)象來初始化內(nèi)部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也可以在外面設(shè)定，即
|
1
2
3
4
5
6
7
8
9
|
state = {n:12}render(){ return ( <div> <h1>THE TIME IS {this.state.n}</h1> </div> )} |
- 為事件處理函數(shù)綁定實(shí)例
|
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> )} |
所以上述的構(gòu)造函數(shù)繼承父類的方法根本沒有必要寫。
函數(shù)組件
|
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的狀態(tài)，需要改變的時(shí)候傳入一個(gè)回調(diào)函數(shù)。函數(shù)的參數(shù)是之前的值，返回一個(gè)要改變的值。這個(gè)方法本質(zhì)是需要傳入一個(gè)新的對(duì)象，來改變React之前對(duì)象的值。 對(duì)此還能簡(jiǎn)便的直接寫改變的值，默認(rèn)會(huì)對(duì)應(yīng)到當(dāng)前對(duì)象并且改變它的值
以上方法比原先的setState要簡(jiǎn)便不少，但是麻煩的是如果有多個(gè)數(shù)據(jù)，需要多次useState而不能一次性傳入多個(gè)值。不過大多數(shù)情況下，數(shù)據(jù)管理的問題都是交給Redux來管理的，所以并不需要React本身來操心
setState的坑
在改變React組件狀態(tài)的時(shí)候，經(jīng)常遇到的問題是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) |
此時(shí)當(dāng)addNum函數(shù)被觸發(fā)的時(shí)候，num只加了1。并沒有像我們想象的加了3。 對(duì)此，React本身的解釋是
調(diào)用 setState 其實(shí)是異步的 —— 不要指望在調(diào)用 setState 之后，this.state 會(huì)立即映射為新的值
對(duì)此的解釋是：
- 無論調(diào)用多少次setState，都不會(huì)立即執(zhí)行更新。而是將要更新的state存入'_pendingStateQuene',將要更新的組件存入'dirtyComponent';
- 當(dāng)根組件didMount后，批處理機(jī)制更新為false。此時(shí)再取出'_pendingStateQuene'和'dirtyComponent'中的state和組件進(jìn)行合并更新；
簡(jiǎn)單來說，就是React執(zhí)行時(shí)，為了提高性能，會(huì)把要更新的setState存入一個(gè)數(shù)組，當(dāng)React本身的同步代碼執(zhí)行完畢，更新之前，將數(shù)組中的setState取出，然后進(jìn)去渲染。上述代碼中，我們因?yàn)閷⑼酱athis.setState({num:this.state.num+1})加入了setState中，所以在批處理取出的時(shí)候，會(huì)產(chǎn)生合并，將眾多的setState合并為一句話，從而只改變了1。因?yàn)檫@個(gè)機(jī)制，所以讓setState像異步代碼，但是其實(shí)它是同步執(zhí)行的，此時(shí)我們?nèi)绻麑⒅暗耐酱a改成異步的，我們就得到了我們想要的結(jié)果
|
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) |
此時(shí)，值直接就加了3，因?yàn)楫惒酱a會(huì)在代碼執(zhí)行的時(shí)候暫存。在所有同步代碼執(zhí)行完畢的時(shí)候再執(zhí)行，此時(shí)批處理機(jī)制已經(jīng)結(jié)束了，于是三個(gè)函數(shù)都被執(zhí)行了，于是加了3 這是目前為止能想到的，如果以后有新的還會(huì)增加
以上就是React 三大屬性之state的使用詳解的詳細(xì)內(nèi)容，更多關(guān)于React 三大屬性之state的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6950500180147994660
