React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明

更新時(shí)間：2022年12月02日 09:08:33 作者：叉叉醬

這篇文章主要介紹了React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React修改數(shù)組對(duì)象問(wèn)題

react開(kāi)發(fā)主張使用函數(shù)式編程，函數(shù)式編程有個(gè)重要的特性就是不可變性。

你無(wú)法更改數(shù)據(jù)，也不能更改。如果要改變或更改數(shù)據(jù)，則必須復(fù)制數(shù)據(jù)副本來(lái)更改。

看個(gè)例子，就是Vue和React兩個(gè)框架實(shí)現(xiàn)給數(shù)組添加一個(gè)元素。

vue

export default {
?? ?name: "home",
?? ?data() {
?? ??? ?return {
?? ??? ??? ?testArr: ['蘋(píng)果','香蕉']
?? ??? ?};
? ? },
? ? created(){
? ? ? ? this.testArr.push('橘子')
? ? }
};
...

react

class App extends React.Component {
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? testArr: ['蘋(píng)果','香蕉']
? ? ? ? };
? ? }
? ? componentDidMount(){
? ? ? ? this.setState({
? ? ? ? ? ? testArr:[...this.state.testArr,'橘子']
? ? ? ? })
? ? }
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <React.Fragment>
? ? ? ? ? ? ? ? <p>{this.state.testArr}</p>
? ? ? ? ? ? </React.Fragment>
? ? ? ? )
? ? }
}

這里會(huì)發(fā)現(xiàn)兩個(gè)框架有個(gè)細(xì)微差別，Vue是直接修改的原數(shù)組，而React是不修改原數(shù)組，而是創(chuàng)建了一份新的數(shù)組，再通過(guò)setState賦值。剛接觸React的時(shí)候的確會(huì)覺(jué)得挺奇怪，感覺(jué)會(huì)無(wú)形增加代碼復(fù)雜度。接下來(lái)看下為何React要如此設(shè)計(jì)。

React遵循函數(shù)式編程規(guī)范。在函數(shù)式編程中，不推薦直接修改原始數(shù)據(jù)。如果要改變或更改數(shù)據(jù)，則必須復(fù)制數(shù)據(jù)副本來(lái)更改。所以，函數(shù)式編程中總是生成原始數(shù)據(jù)的轉(zhuǎn)換副本，而不是直接更改原始數(shù)據(jù)。

這里是一些常見(jiàn)的React修改數(shù)組或者對(duì)象的例子，所有這些函數(shù)都不改變現(xiàn)有的數(shù)據(jù)，而是返回新的數(shù)組或?qū)ο蟆?/p>

刪除數(shù)組中的指定元素

//刪除testArr中的櫻桃
...
constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? ? testArr: ['蘋(píng)果','香蕉','橘子','櫻桃','橙子']
? ? };
}
componentDidMount(){
? ? this.setState({
? ? ? ? testArr:this.state.testArr.filter(res=>res!=='櫻桃')
? ? })
}
...

合并兩個(gè)對(duì)象

...
constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? ? testObj1:{
? ? ? ? ? ? chineseName:'橘子',
? ? ? ? ? ? englishName:'orange'
? ? ? ? },
? ? ? ? testObj2:{
? ? ? ? ? ? color:'yellow',
? ? ? ? ? ? shape:'circle'
? ? ? ? },
? ? ? ? testObj:{}
? ? };
}
componentDidMount() {
? ? this.setState({
? ? ? ? testObj: Object.assign(this.state.testObj1,this.state.testObj2)
? ? })
}
...

修改多層級(jí)對(duì)象的值

//testObj的apple的color改成green
...
constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? ? testObj: {
? ? ? ? ? ? banner: {
? ? ? ? ? ? ? ? name: '香蕉',
? ? ? ? ? ? ? ? color: 'yellow'
? ? ? ? ? ? },
? ? ? ? ? ? apple: {
? ? ? ? ? ? ? ? name: '蘋(píng)果',
? ? ? ? ? ? ? ? color: 'red'
? ? ? ? ? ? }
? ? ? ? }
? ? };
}
componentDidMount() {
? ? this.setState({
? ? ? ? testObj: {
? ? ? ? ? ? ...this.state.testObj,
? ? ? ? ? ? apple:{
? ? ? ? ? ? ? ? ...this.state.testObj.apple,
? ? ? ? ? ? ? ? color:'green'
? ? ? ? ? ? }
? ? ? ? }
? ? })
}
...

React修改數(shù)組中某個(gè)參數(shù)值方法

const currentPageVideoList=[...this.state.currentPageVideoList];
this.setState({currentPageVideoList: currentPageVideoList.map((item, key)=>?
? ? key==index?{...item, coverImg: this.state.defaultImg}:item
)})

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: