Day270/300 react hooks 使用useState 修改后，视图不更新

1、React 代码

{chatData.map(item => {
    return <div key={item.id}> </div>
  })}

使用useState改变数组的值，dom没有更新：

const showChat = (item)=>{
 item.open = !item.open
 console.log('item-open',chatData)
 setChatData(chatData)
}

2、原因

useState异步，数据不能及时获取到

useState() 属于异步函数，在useState() 第一次存储的时候，值会存储不上。

• 因为react中state的更新是异步的，我们setState后，react不会立刻对值进行改变，而是将其暂时放入pedding队列中。
• react会合并多个state，然后值render一次，所以不要在循环中使用useState，它有可能只render最后一次set值，但是当传入一个函数时，函数就会被放入一个队列中，然后按照顺序执行。

React中默认浅监听，当变量为引用类型时，栈中存的是对象的引用（地址），setState改变的是堆中的数据。所以此时set后，栈中的地址还是原地址，React浅监听到地址没变，会认为State并未改变，所以没有重新渲染页面

3、解决方案

修改为数组的结构赋值形式就可以了。

const showChat = (item)=>{
 item.open= !item.open
 console.log('item-open',item.open,chatData)
 setChatData([...chatData])
}

4、React Hooks 整理

1. useState: 用来在函数组件中添加状态，能够代替类组件中的state；
2. useEffect: 用来在函数组件中添加副作用，例如发起网络请求、更新DOM等操作；
3. useContext: 用来在函数组件之间共享全局数据；
4. useReducer: 用来管理复杂状态或多个相关状态的更新；
5. useCallback: 用来缓存函数实例，避免不必要的渲染；
6. useMemo: 用来缓存计算结果，提高组件渲染性能；
7. useRef: 用来获取DOM节点或缓存任何可变值，类似于类组件中的ref属性。

参考链接

链接：https://juejin.cn/post/7102334510808694792