先定義一個state對象
state = {
members: [
{
name: 'ronffy',
age: 30
}
]
}
- 優(yōu)化setState方法
this.state.members[0].age++; //錯誤示例
setState的第1種實(shí)現(xiàn)方法
const { members } = this.state;
this.setState({
members: [
{
...members[0],
age: members[0].age + 1,
},
...members.slice(1),
]
})
setState的第2種實(shí)現(xiàn)方法
this.setState(state => {
const { members } = state;
return {
members: [
{
...members[0],
age: members[0].age + 1,
},
...members.slice(1)
]
}
})
下面用用immer更新state
import produce from "immer";
//代碼量更少响委，也較清晰
this.setState(produce(draft => {
draft.members[0].age++;
}))
2.優(yōu)化reducer
immer的produce的拓展用法
普通reducer
const reducer = (state, action) => {
const { members } = state;
return {
...state,
members: [
{
...members[0],
age: members[0].age + 1,
},
...members.slice(1),
]
}
}
集合immer,reducer的寫法
const reducer = (state, action) => produce(state, draft => {
draft.members[0].age++;
})
可以看到，通過 produce ，我們的代碼量已經(jīng)精簡了很多恍箭；
不過仔細(xì)觀察不難發(fā)現(xiàn)蔑祟，利用 produce 能夠先制造出 producer 的特點(diǎn)膘魄，代碼還能更優(yōu)雅：
const reducer = produce((draft, action) => {
draft.members[0].age++;
})
