react immutable 相关困惑

主要困惑的内容在两个 onClick 事件里，一个对于 state 是 immutable 的，另一个不是，但是效果是相同的。疑惑的点在于

两种写法是否都可以，第一种写法会不会导致 bug(比如 react18 cm 模式下)
如果两个写法都可以，是不是说明 react 本身并不强依赖 state 的 immutable ，只需要让 newState!==oldState ，也就是引用改变（非 js 基础类型），然后 newState 丢到 setState 里面去 react 都能正常 render

import { useState } from "react"

function App() {
  let [personList, setPersonList] = useState([{ name: "jack", age: 18 }])
  
  const onClick1 = () => {
    let newState = [...personList]
    newState.push({ name: "kk", age: 1 })
    // 这里相当于直接修改了 personList[0].name 上的值，对于 personList 这个 state 没有做到 immutable
    newState[0].name = "ddddddd"
    setPersonList(newState)
  }
  
  const onClick2 = () => {
    setPersonList([
      {
        // 这里先复制一遍 personList[0]，再复制，personList 这个 state 在过程中是只读的，是 immutable
        ...personList[0],
        name: "ddddddd",
      },
      ...personList.slice(1),
      { name: "kk", age: 1 },
    ])
  }
  
  return (
    <div className="App">
      <button onClick={onClick1}>add1</button>
      <button onClick={onClick2}>add2</button>
      {personList.map((item, index) => {
        return <div key={index}>{item.name}</div>
      })}
    </div>
  )
}

export default App

补充一下上述语境中 immutable 的定义，以常见的 immutable 库 immer 为例，可以看到执行函数，返回 new1 后，old 的值是不变的，这样可以认为 old 是 immutable 的

import { produce } from "immer"

const old = [{ name: "jack", age: 18 }]

const new1 = produce(old, (state) => {
  state[0].name = "ddddddd"
  state.push({ name: "kk", age: 1 })
})

console.log("原始值", old) // 原始值 [ { name: 'jack', age: 18 } ]
console.log("新值", new1) // 新值 [ { name: 'ddddddd', age: 18 }, { name: 'kk', age: 1 } ]

yukinotech

2022-04-22 14:53:50 +08:00

@gogogo1203 你说的道理是对的。Shallow comparison 就是用 === 比较，对象就比较引用，所以浅复制一个 obj ，虽然不能改变 obj 属性里面的引用，但是浅复制后的新 obj 引用就不是原来的了，丢入 setState 能触发新的 render 。这个过程和对象的属性是同一个 referrence 没什么关系吧。而且 onClick1 的注释也说得比较清楚了，不然为啥说 newState[0].name = "ddddddd"就是修改 personList[0].name

ChefIsAwesome

2022-04-22 20:44:40 +08:00

react 不来就不依赖 immutable 那些东西。
正常的机制就是你 setState 之后，react 新旧 state 做一遍 deep diff 。react 有 shouldComponentUpdate 这个 api ，让你可以自己处理 diff 机制。
当初 react 面世之后，Clojure 有个基于 react ，叫 om 的项目。因为 Clojure 是函数式编程，数据是 immutable 的，在 shouldComponentUpdate 里比较两个 immutable 就是 === 这么判断，这就大大提高了运行速度。接下来就出现了各种用 js 实现 immutable 的库。函数式编程也在 js 圈子开始流行起来。