What are the methods in react to change state?

The methods for react to change state are: 1. Modify state through "this.setState({title:'React'});" method; 2. Through "this.setState((preState, props)=> ;counter:preState.quantity 1)" method to modify state; 3. Change the state of the component through "replaceState" method.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What are the ways to change state in react?

Correctly modify state in react

First, in react, we can directly obtain the state through this.state.{property}, but when we want to modify the state, there are many pitfalls that need to be paid attention to. The following are three common ones Trap:

State cannot be modified directly.

The component directly modifies the state and does not retrigger render. For example:

this.state.title='React';

The correct modification method is:

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

The update of state is asynchronous

When setState is called, the component state will not be updated immediately Change, but put the state to be modified into the event queue, and react optimizes the real execution timing, and for its own performance reasons, multiple setState state modifications may be merged into one state modification. Therefore, do not rely on the current state to calculate the next state, because when the state modification is actually performed, sometimes the dependent this.state is not guaranteed to be the latest state, because react itself will merge multiple states into one, then this. The state is still the old state, so you cannot rely on the current props to calculate the next state, because the update of props is also asynchronous. For example: in the commonly used examples of react, there is an operation of clicking the plus sign to increase the value by one. If you click once, the number will be increased by 1. If you click it twice in a row, it will still be increased by 1. This is when react is merged and modified to once. It is equivalent to executing the following code:

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

Then the previous operation is overwritten, and the final value is only increased by 1. At this time, another function can be used as a parameter, setState. This function has two parameters, the first parameter It is the state of the component before this modification, and the second parameter is the latest props.

The correct modification method is:

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

State update is a merge process

When calling ssetState to modify the component When entering the state, you only need to pass in the changed state, not the complete state, because the update of the component state is a merging process. For example, the state of a component is:

this.state={

title:'React',

content:'React is an wondeful JS library'

}

Note: When only When modifying the title, just pass the modified title to setState:

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

react will merge the latest title to the original state while retaining the content of the original state. The final merged state is:

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

2. State and immutable objects

React officially treats state as an immutable object. On the one hand, this.state is directly modified, and the component will not be re-rendered; On the other hand, all states contained in state should be immutable objects. When a state in the state changes, the state object should be re-created instead of directly modifying the original state. Then when the state changes When, how to create a new state? We can divide it into the following three situations according to the state type:

The state type is an immutable type (number, string, bool, bull, undefined)

This situation is the simplest, because the state is an immutable type, so just assign a new value to the state to be modified. As shown below, the count we want to modify is number. Type, title (string), success (bool) three states:

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

The status type is an array

If there is an array type of state books, when you want to add a book to books, you can use the concat method of the array or the extended syntax of es6 (apread syntax)

Method 1: Use preState, concat to create a new Array

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

Method 2: ES6 spread syntax

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

When we read from books When intercepting some elements as a new state, you can use the slice method of the array:

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

When you filter some elements from books and use them as a new state, you can use filter method:

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

        return item != 'React';

        })
    })

Note: Do not use push, pop, shift, unshift, splice methods to modify the status of the array type, because these methods are all in the original array Modified on the basis of concat, slice, filter will return a new array.

Method 3: The type of state is an ordinary object (excluding: string, array)

Use the Object.assgin() method of es6

this.setState({

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

})

Use 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视频教程》

The above is the detailed content of What are the methods in react to change state?. For more information, please follow other related articles on the PHP Chinese website!