React Hooks useState 调用 setState 页面不刷新问题

记录一下最近项目中遇到的React Hooks调用setState 页面不刷新问题。 查阅后发现setState时候，如果用的是当前的state时（浅拷贝也会），都会直接被跳过组件渲染！

官方文档地址：zh-hans.reactjs.org/docs/hooks-… 官方文档描述如下：

举例：

import React, { useState } from 'react'

const Llf = function () {
      const [state, setState] = useState({ a: 1 })
      const [state2, setState2] = useState({ a: 1 })

      return <>
        <div>
          state 值为: {JSON.stringify(state)}
          <button 
             onClick={() => {
             // newState 点击后值修改为{ a: 1,b :2 } 了,但视图不会更新
              
                let newState = state  
                newState.b = 2
                setState(newState)
             }}>
              试图更新state
          </button>
        </div>
        
        <div>
         state2 值为: {JSON.stringify(state2)}
         <button 
          onClick={() => {
          // newState 点击后值修改为{ a: 1,b :2 } 了,并视图会更新
          
            let newState2 = { a: 1 }
            newState2.b = 2
            setState2(newState2)
          }}>
              试图更新state2
          </button>
        </div>
      </>
}

export default Llf

如下代码，第一个button点击事件试图更新state，因为newState取值来自原state（浅拷贝），所以 setState(newState)后，state状态虽然发生改变，但是页面并不会重新渲染展示的将还是原来的旧state

而下面 第二个button点击事件更新state，因为newState是重新申明对象，所以 setState2(newState)后，state发生改变，页面会重新渲染

所以建议，再setState的时候，尽量不要使用旧的state,如要使用原state，可以通过变量保存旧的state变量值,先setState(null);再stateState(旧的state变量值)；也可以实现；这里hooks的setState跟class的setState有区别，引用官方原话：与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。

useState 不会自动合并更新对象举例：

多次setState都被分别执行了(这里从控制台打印可以看到会被多次执行，但只会渲染一次，可以从useEffect中打印观察)！