您现在的位置是:首页 >技术交流 >Day270/300 react hooks 使用useState 修改后,视图不更新网站首页技术交流

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

Arden Zhao 2024-06-17 11:28:34
简介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

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。