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 會立即映射為新的值
對此的解釋是：
- 無論調用多少次setState，都不會立即執行更新。而是將要更新的state存入'_pendingStateQuene',將要更新的組件存入'dirtyComponent';
- 當根組件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
