您现在的位置是:首页 >技术交流 >Day270/300 react hooks 使用useState 修改后,视图不更新网站首页技术交流
Day270/300 react hooks 使用useState 修改后,视图不更新
简介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 整理
- useState: 用来在函数组件中添加状态,能够代替类组件中的state;
- useEffect: 用来在函数组件中添加副作用,例如发起网络请求、更新DOM等操作;
- useContext: 用来在函数组件之间共享全局数据;
- useReducer: 用来管理复杂状态或多个相关状态的更新;
- useCallback: 用来缓存函数实例,避免不必要的渲染;
- useMemo: 用来缓存计算结果,提高组件渲染性能;
- useRef: 用来获取DOM节点或缓存任何可变值,类似于类组件中的ref属性。
参考链接
链接:https://juejin.cn/post/7102334510808694792
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。