react怎么修改state

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

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

在react中正確修改state

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

不能直接修改state。

組件直接修改state，并不會(huì)重新觸發(fā)render。列如：

this.state.title='React';

正確修改方式是：

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

state的更新是異步的

調(diào)用setState時(shí)，組件state并不會(huì)立即改變，而是把要修改的狀態(tài)放入事件隊(duì)列中，而react優(yōu)化了真正的執(zhí)行時(shí)機(jī)，并且出于本身性能原因，可能會(huì)將多次setState的狀態(tài)修改合并成一次狀態(tài)修改。因此不要依靠當(dāng)前的state計(jì)算下一個(gè)state，因?yàn)楫?dāng)真正執(zhí)行狀態(tài)修改時(shí)，有時(shí)候依賴(lài)的this.state并不能保證是最新的state，因?yàn)閞eact本身會(huì)把多次state合并成一次，這時(shí)this.state還是舊state，因此也不能依賴(lài)當(dāng)前的props計(jì)算下一個(gè)狀態(tài)，因?yàn)閜rops的更新也是異步。如：對(duì)于react常用的列子中有一個(gè)點(diǎn)擊加號(hào)數(shù)值增加一的操作，點(diǎn)擊一次+，數(shù)量會(huì)加1，如果連續(xù)點(diǎn)擊兩次，還是會(huì)加1，這是在react合并修改為一次的情況下，相當(dāng)與執(zhí)行了如下代碼：

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

于是后面覆蓋前面的操作，最終數(shù)值只加1，此時(shí)可以使用另一個(gè)函數(shù)作為參數(shù)的setState，這個(gè)函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是本次組件修改前的狀態(tài)，第二個(gè)參數(shù)是當(dāng)前最新的props。

正確修改方式是：

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

state的更新是一個(gè)合并的過(guò)程

當(dāng)調(diào)用ssetState修改組件的狀態(tài)時(shí)，只需要傳入發(fā)生改變的state，而不是完整的state，因?yàn)榻M件state的更新時(shí)一個(gè)合并的過(guò)程，列如，一個(gè)組件的狀態(tài)為：

this.state={

title:'React',

content:'React is an wondeful JS library'

}

注：當(dāng)只需要修改title時(shí)，將修改的title傳給setState即可：

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

react會(huì)合并最新的title到原來(lái)的狀態(tài)，同時(shí)保留原來(lái)狀態(tài)的content，最終合并state為：

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

二，state與不可變對(duì)象

react官方把state當(dāng)成不可變對(duì)象，一方面直接修改this.state,組件并不會(huì)重新render；另一方面，state中包含的所有狀態(tài)都應(yīng)該是不可變的對(duì)象，當(dāng)state當(dāng)中的某一個(gè)狀態(tài)發(fā)生變化時(shí)，應(yīng)該重新創(chuàng)建這個(gè)狀態(tài)對(duì)象，而不是直接修改原來(lái)的state狀態(tài)，那么當(dāng)狀態(tài)發(fā)生變化時(shí)，如何去創(chuàng)建新的狀態(tài)呢，我們根據(jù)狀態(tài)類(lèi)型可以分為下面三種情況：

狀態(tài)類(lèi)型為不可變類(lèi)型（number，string，bool，bull,undefined）

這種情況最簡(jiǎn)單，因?yàn)闋顟B(tài)是不可變類(lèi)型，所以直接給要修改的狀態(tài)賦一個(gè)新值即可，列如下面我們要修改的count為number型，title（string）,success(bool)三個(gè)狀態(tài):

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

狀態(tài)類(lèi)型為數(shù)組

假如有一個(gè)數(shù)組類(lèi)型的狀態(tài)books，當(dāng)想books中增加一本書(shū)時(shí)，既可使用數(shù)組的concat方法或者es6的擴(kuò)展語(yǔ)法(apread syntax)

方法一：使用preState，concat創(chuàng)建新數(shù)組

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

方法二：ES6 spread syntax

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

當(dāng)我們從books中截取部分元素作為新?tīng)顟B(tài)時(shí)，可以用數(shù)組的slice方法：

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

當(dāng)從books中過(guò)濾部分元素后，作為新?tīng)顟B(tài)時(shí)，可以使用filter方法:

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

        return item != 'React';

        })
    })

注意：不要使用push,pop,shift,unshift,splice登方法修改數(shù)組類(lèi)型的狀態(tài)，因?yàn)檫@些方法都是在原數(shù)組的基礎(chǔ)上修改的，而concat，slice，filter會(huì)返回一個(gè)新的數(shù)組。

方法三：狀態(tài)的類(lèi)型是普通對(duì)象(不包含：string，array)

使用es6的Object.assgin()方法

this.setState({

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

})

使用對(duì)象擴(kuò)展語(yǔ)法（Object spread properties）:

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

總結(jié)：

創(chuàng)建新的狀態(tài)的關(guān)鍵是，避免使用會(huì)直接修改原對(duì)象的方法而是使用可以返回一個(gè)新對(duì)象的方法，當(dāng)然可以使用Immutable的JS庫(kù)（Immutable.js）實(shí)現(xiàn)類(lèi)似的效果。

思考：

為什么React推薦組件狀態(tài)的修改時(shí)不可變對(duì)象呢？

1. 不可變對(duì)象的修改會(huì)返回一個(gè)新的對(duì)象，不用擔(dān)心原對(duì)象在不小心的情況下修改導(dǎo)致的錯(cuò)誤，方便程序的管理和調(diào)試

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

三：除了以上方法修改react組件的狀態(tài)之外，我們還經(jīng)常會(huì)用到replaceState改變組件的狀態(tài)

replaceState()方法與setState()類(lèi)似，但是方法只會(huì)保留nextState中狀態(tài)，原state不在nextState中的狀態(tài)都會(huì)被刪除。使用語(yǔ)法：

replaceState(object nextState,[, function callback])

nextState，將要設(shè)置的新?tīng)顟B(tài)，該狀態(tài)會(huì)替換當(dāng)前的state。

callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會(huì)在replaceState設(shè)置成功，且組件重新渲染后調(diào)用。

如：

 class App extends React.Component{

     constructor(props);

      this.state={

      count:1

      title:'數(shù)字計(jì)算'

      }

}

handleClick=()=>{

  this.replaceState({

    count:this.state.count+1

  })

}

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

}

結(jié)果為：

{
count：1
}

以上就是“react怎么修改state”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。