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
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
}
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推荐组件状态的修改时不可变对象呢？
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
}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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
