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

2. 对象扩展运算符...：创建包含与另一个对象或数组完全相同的内容的新对象或数组

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: 'jen@reynholmindustries.com' }, { id: 2, email: 'peter@initech.com' } ] Action contains the new info: action = { type: "UPDATE_EMAIL" payload: { userId: 2, // Peter's ID newEmail: 'peter@construction.co' } } \*/ //通过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; }); }