React和Redux中的不变性
https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
一、不变性和副作用
1.不变：不断创造新值来替换旧值
2.不变性规则：
（1）当给定相同的输入时，纯函数必须始终返回相同的值
（2）纯函数不能有任何副作用
3.副作用：修改直接函数范围之外的东西
改变/修改传入的参数（的属性）
修改函数外部的任何其他状态，例如全局变量
进行API调用
console.log()
Math.random()
4.会改变数组的数组方法：push,pop,shift,unshift,sort,reverse,splic
如果想对数组进行不可变的操作，可以先复制该数组，再对副本进行操作
5.纯函数只能调用其他纯函数
二、React更喜欢不变性
1.不变性和PureComponent
继承了React.Component的function和class类型的react组件会在父级组件重新渲染或者使用setState时重新渲染。
继承了React.PureComponent的class仅在其状态更新或者其props更新时才会重新渲染。
将props传入到PureComponent中时，需要保证不可变的更新，因为如果直接修改内部或者属性，但是引用不变，则组件无法注意到它已经改变，则不会重新渲染。
2.JS中的引用相等性
对象和数组存储在内存中，当重新分配变量时，变量会指向新的内存地址，但如果仅改变变量的内部结构，变量仍指向相同的地址，地址里面的内容发生变化。
使用===比较对象和数组时，本质是在比较引用地址，即“引用相等”。
修改一个对象时，会修改对象的内容，但不会更改其引用。将一个对象分配给另一个对象时，指向相同的内存位置，对第二个对象的操作也会影响第一个对象的值。
为什么不深入检查是否相等：速度慢，时间复杂度O（N）
比较引用：O（1），不管对象内部有多复杂
3.const只阻止重新分配引用， 不阻止改变对象内容
4.思考：React框架从性能方面考虑，为了保证复杂场景下的性能，在比较的时候没有挨个比较object内部的值，而是比较引用地址，保证每次比较的时间复杂度都是O（1）。因此从这个设计思想出发，在更新State的时候，都是基于旧值返回新值（引用地址改变），而不是直接通过object.属性=xxx来直接修改object的内容。所以大部分语言修改一个object的属性的时候是通过object.属性=xxx来修改，React是基于旧值返回新值。
三、在Redux中更新state（主要内容，前面都是为了解释这个）
1.要求reducers是纯函数，不能直接修改state：接受state和action，基于旧的state，返回一个新的state。上面的部分解释了可变和不可变，下面介绍了，如何不可变的更新state
- 对象扩展运算符…：创建包含与另一个对象或数组完全相同的内容的新对象或数组
3.更新state：会浅合并传入的this.setState()对象
在redux的reducer中：
（1）更新普通的state
return {
…state,
(updates here)
}
（2）更新对象最顶层的属性时，需要复制现有的state，通过…展开对象，然后加入想要更改的属性及其值
function reducer(state, action) {
/*
State looks like:
state = {
clicks: 0,
count: 0
}
*/
return {
…state,
clicks: state.clicks + 1,
count: state.count - 1
}
}
（3）更新对象中的对象，当想要更新的部分位于深层时，需要把每一级展开并创建副本
function reducer(state, action) {
/*
State looks like:
state = {
house: {
name: "Ravenclaw",
points: 17
}
}
*/
// Two points for Ravenclaw
return {
…state, // copy the state (level 0)
house: {
…state.house, // copy the nested object (level 1)
points: state.house.points + 2
}
}
（4）通过key来更新对象
function reducer(state, action) {
/*
State looks like:
const state = {
houses: {
gryffindor: {
points: 15
},
ravenclaw: {
points: 18
},
hufflepuff: {
points: 7
},
slytherin: {
points: 5
}
}
}
*/
// Add 3 points to Ravenclaw,
// when the name is stored in a variable
const key = “ravenclaw”;
return {
…state, // copy state
houses: {
…state.houses, // copy houses
[key]: { // update one specific house (using Computed Property syntax)
…state.houses[key], // copy that specific house’s properties
points: state.houses[key].points + 3 // update its points property
}
}
}
（5）将一个Item添加到数组中
通过Array.prototype.unshift和push将Item添加到数组前面/后面会改变数组，希望通过不可变的方式添加Item（对象展开复制，或者通过.slice复制后再push）
function reducer(state, action) {
/*
State looks like:
state = [1, 2, 3];
*/
const newItem = 0;
return [ // a new array
newItem, // add the new item first
…state // then explode the old state at the end 添加到前面
];
return [ // a new array
newItem, // add the new item first
…state // then explode the old state at the end 添加到后面
];
//或者通过.slice复制数组，在push到末尾
function reducer(state, action) {
const newItem = 0;
const newState = state.slice();
newState.push(newItem);
return newState;
（6）通过map更新数组中的item
通过.map来遍历每个item，找到要修改的item，使用返回值作为这个item新的值，最后map返回一个新的数组，需要筛选则使用.filter
function reducer(state, action) {
/*
State looks like:
state = [1, 2, "X", 4];
*/
return state.map((item, index) => {
// Replace “X” with 3
// alternatively: you could look for a specific index
if(item === “X”) {
return 3;
}
// Leave every other item unchanged
return item;
});
}
（7）更新数组中的对象
通过.map遍历每个item，找到要修改的对象，复制这个对象并对副本进行修改，作为一个新的对象返回，最后map返回一个新的数组，需要筛选则使用.filter
function reducer(state, action) {
/*
State looks like:
state = [
{
id: 1,
email: '[email protected]'
},
{
id: 2,
email: '[email protected]'
}
]
Action contains the new info:
action = {
type: "UPDATE_EMAIL"
payload: {
userId: 2, // Peter's ID
newEmail: '[email protected]'
}
}
*/
//通过map返回的是一个新的数组
return state.map((item, index) => {
// Find the item with the matching id
if(item.id === action.payload.userId) {
// Return a new object 修改后，返回的是一个新对象
return {
…item, // copy the existing item 复制这个对象不需要修改的部分
email: action.payload.newEmail // replace the email addr
}
}
// Leave every other item unchanged
return item;
});
}
（8）在数组中间插入一个item
.splice函数将插入一个item，但会改变数组。可以先试用slice复制数组，再使用splice插入item，或者复制新item之前的元素，插入新item，再复制item之后的元素
function reducer(state, action) {
/*
State looks like:
state = [1, 2, 3, 5, 6];
*/
const newItem = 4;
// make a copy
const newState = state.slice();
// insert the new item at index 3
newState.splice(3, 0, newItem)
return newState;
/*
// You can also do it this way:
return [ // make a new array
…state.slice(0, 3), // copy the first 3 items unchanged
newItem, // insert the new item
…state.slice(3) // copy the rest, starting at index 3
];
*/
}
（9）按索引更新数组中的item
使用map找到这个item并返回新值
function reducer(state, action) {
/*
State looks like:
state = [1, 2, "X", 4];
*/
return state.map((item, index) => {
// Replace the item at index 2
if(index === 2) {
return 3;
}
// Leave every other item unchanged
return item;
});
}
（10）从数组中删除一个item
通过filter，传入每个item，返回一个只包含判断函数返回true的item的新数组
function reducer(state, action) {
/*
State looks like:
state = [1, 2, "X", 4];
*/
return state.filter((item, index) => {
// Remove item “X”
// alternatively: you could look for a specific index
if(item === “X”) {
return false;
}
// Every other item stays
return true;
});
}