react can be obtained by this.state.xx the state directly, but when we modify the state, they often have a lot of pits.
- You can not directly modify the state
assembly to modify state, and will not re-trigger the render. E.g:
//错误
this.state.title='attend';
//正确
this.setState({title:'attend'});
- update state is asynchronous
when calling setState, the component state does not change immediately, but you want to modify the state placed in the event queue them, react optimizes real execution timing, if consecutive write setState many times, many times will setState altering the state merged into a state modification.
//正确
this.setState((prevState, props)=>({
counter: prevState.counter + 1
}))
- update state is a process of merging
when calling setState () state modification component, and only need to pass state changes occur, rather than a complete state, because the state of the updated component is a merger process:
this.state = {
title: 'React',
content: 'React is an wondeful JS library'
}
When only need to modify the title, only you need to modify the title passed to setState:
this.setState({title:'ReactJs'});
react merges the latest title to its original state while preserving the original content of the state, eventually merge state as follows:
this.state = {
title: 'ReactJs',
content: 'React is an wondeful Js library'
}
state and immutable objects
react to official state as immutable objects, on the one hand directly modify this.state, the render component will not reactivate; on the other hand, all the states included in the state should be immutable objects, among state when one state changes, should re-create the state of the object, rather than directly modifying the original state state, when the state changes, how to create a new state of it, we can be divided into three cases according to the following status types:
- State type is immutable
number, string, boolean, null, undefined
case simplest, because the state is immutable, so you want to modify the state directly to assign a new value to, for example, we want to modify count for the number type, title (string), success ( boolean) three states:
this.setState({
count:1,
title:'React',
success:true
})
- State type is an array
when the array type, if there is a state of books, a book when the increase in books.
//方法一：使用preState，concat创建新数组
this.setState((prevState)=>({
books: prevState.books.concat(['React Guide'])
}))
//方法二：ES6 spread syntax
this.setState(prevState=>({
books:[...prevState,'React Guide']
}))
When we element portion taken from the books as a new state, the array slice method can be used:
this.setState(prevState=>({
books: prevState.books.slice(1,3);
}))
When the filter element portion from the books, as the new state, the filter method may be used:
this.setState(prevState=>({
books: prevState.books.filter(item=>{
return item!='React';
})
}))
[Note] Do not push, pop, shift, unshift, splice and other methods to modify the state of array types, because these methods are modified on the basis of the original array, and concat, slice, filter returns a new array.
- Type state is a normal object
using the es6 Object.assgin () method
this.setState({
onwer: Object.assgin({},preState.onwer,{name:'Jason'});
})
(2) extended syntax using the object (Object spread properties):
this.setState(preState=>{
owner: {...preState.owner, name:'Jason'}
})
Summarize
key to creating a new state is to avoid the use of directly modifying the original object's method, this method is called variation methods vue, but instead can use the method returns a new object , of course, you can use Immutable JS libraries (Immutable. js) to achieve a similar effect.
Think
Why is it an immutable object when you modify React recommended component status?
Modification (1) immutable object will return a new object, do not worry about the original object modification errors in the case of careless, easy to manage and debug procedures.
When the object is not changed, the method of assembly requires shouldComponentUpdate reference only twice before and after comparison of the state of the object can be determined whether really changed status, thereby avoiding unnecessary render call (2) in a state of performance considerations, target unit .
Advanced
In addition to the above methods to change the status of the components react, we also often use replaceState () to change the status of the components.
replaceState () method and setState () is similar, but the method only kept nextState state, the original state is not nextState in the state will be deleted.
//使用语法：
replaceState(object nextState[, function callback])
nextState，将要设置的新状态，该状态会替换当前的state。
callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。
Reproduced in: https: //www.jianshu.com/p/15c033b341a8