react怎么修改state

今天小編給大家分享一下react怎么修改state的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

react改變state的方法有：1、通過“this.setState({title:'React'});”方法修改state；2、通過“this.setState((preState, props)=>counter:preState.quantity+1)”方法修改state；3、通過“replaceState”方法改變組件的狀態。

在react中正確修改state

一，在react中可以通過this.state.{屬性}的方式直接獲取state，但當我們想要修改state的時候有許多的坑需要注意，以下 為三種常見的陷阱：

不能直接修改state。

組件直接修改state，并不會重新觸發render。列如：

this.state.title='React';

正確修改方式是：

this.setState({title:'React'});

state的更新是異步的

調用setState時，組件state并不會立即改變，而是把要修改的狀態放入事件隊列中，而react優化了真正的執行時機，并且出于本身性能原因，可能會將多次setState的狀態修改合并成一次狀態修改。因此不要依靠當前的state計算下一個state，因為當真正執行狀態修改時，有時候依賴的this.state并不能保證是最新的state，因為react本身會把多次state合并成一次，這時this.state還是舊state，因此也不能依賴當前的props計算下一個狀態，因為props的更新也是異步。如：對于react常用的列子中有一個點擊加號數值增加一的操作，點擊一次+，數量會加1，如果連續點擊兩次，還是會加1，這是在react合并修改為一次的情況下，相當與執行了如下代碼：

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

于是后面覆蓋前面的操作，最終數值只加1，此時可以使用另一個函數作為參數的setState，這個函數有兩個參數，第一個參數是本次組件修改前的狀態，第二個參數是當前最新的props。

正確修改方式是：

this.setState((preState, props)=>counter:preState.quantity+1)

state的更新是一個合并的過程

當調用ssetState修改組件的狀態時，只需要傳入發生改變的state，而不是完整的state，因為組件state的更新時一個合并的過程，列如，一個組件的狀態為：

this.state={

title:'React',

content:'React is an wondeful JS library'

}

注：當只需要修改title時，將修改的title傳給setState即可：

this.setState({title:'ReactJs'});

react會合并最新的title到原來的狀態，同時保留原來狀態的content，最終合并state為：

this.state={
title:'ReactJs,
content:''React is an wondeful Js library
}

二，state與不可變對象

react官方把state當成不可變對象，一方面直接修改this.state,組件并不會重新render；另一方面，state中包含的所有狀態都應該是不可變的對象，當state當中的某一個狀態發生變化時，應該重新創建這個狀態對象，而不是直接修改原來的state狀態，那么當狀態發生變化時，如何去創建新的狀態呢，我們根據狀態類型可以分為下面三種情況：

狀態類型為不可變類型（number，string，bool，bull,undefined）

這種情況最簡單，因為狀態是不可變類型，所以直接給要修改的狀態賦一個新值即可，列如下面我們要修改的count為number型，title（string）,success(bool)三個狀態:

this.setState({
count:1,
title:'React',
success:true
})

狀態類型為數組

假如有一個數組類型的狀態books，當想books中增加一本書時，既可使用數組的concat方法或者es6的擴展語法(apread syntax)

方法一：使用preState，concat創建新數組

 this.setState((preState)=>books:preState.books.concat(['React Guide']))

方法二：ES6 spread syntax

this.setState(preState=>books:[...preState,''React Guide])

當我們從books中截取部分元素作為新狀態時，可以用數組的slice方法：

this.setState(preState=>books:preState.books.slice(1,3))

當從books中過濾部分元素后，作為新狀態時，可以使用filter方法:

 this.setState(preState => {
        books: preState.books.filter(item => {

        return item != 'React';

        })
    })

注意：不要使用push,pop,shift,unshift,splice登方法修改數組類型的狀態，因為這些方法都是在原數組的基礎上修改的，而concat，slice，filter會返回一個新的數組。

方法三：狀態的類型是普通對象(不包含：string，array)

使用es6的Object.assgin()方法

this.setState({

onwer:Object.assgin({},preState.onwer,{name:'Jason'});

})

使用對象擴展語法（Object spread properties）:

this.setState(preState=>{
owner:{...preState.owner,name:'Jason'}
})

總結：

創建新的狀態的關鍵是，避免使用會直接修改原對象的方法而是使用可以返回一個新對象的方法，當然可以使用Immutable的JS庫（Immutable.js）實現類似的效果。

思考：

為什么React推薦組件狀態的修改時不可變對象呢？

1. 不可變對象的修改會返回一個新的對象，不用擔心原對象在不小心的情況下修改導致的錯誤，方便程序的管理和調試

2. 處于性能的考慮，對象組件的狀態是不可變對象時，在組件的shouldComponentUpdate方法中僅需要比較前后兩次狀態對象的引用就可以判斷狀態是否真的改變，從而避免不必要的render調用

三：除了以上方法修改react組件的狀態之外，我們還經常會用到replaceState改變組件的狀態

replaceState()方法與setState()類似，但是方法只會保留nextState中狀態，原state不在nextState中的狀態都會被刪除。使用語法：

replaceState(object nextState,[, function callback])

nextState，將要設置的新狀態，該狀態會替換當前的state。

callback，可選參數，回調函數。該函數會在replaceState設置成功，且組件重新渲染后調用。

如：

 class App extends React.Component{

     constructor(props);

      this.state={

      count:1

      title:'數字計算'

      }

}

handleClick=()=>{

  this.replaceState({

    count:this.state.count+1

  })

}

render(){
    return(
      <button onClick={this.onClick}>點我</button>
      )
  }

}

結果為：

{
count：1
}

以上就是“react怎么修改state”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。