2个奇怪的react写法
更新时间：2023年03月15日 15:09:35 作者：卡颂
大家好，我卡颂。虽然React官网用大量篇幅介绍最佳实践，但因JSX语法的灵活性，所以总是会出现奇奇怪怪的React写法。本文介绍2种奇怪（但在某些场景下有意义）的React写法。也欢迎大家在评论区讨论你遇到过的奇怪写法
ref的奇怪用法
这是一段初看让人很困惑的代码：
function App() {
const [dom, setDOM] = useState(null);
return <div ref={setDOM}></div>;
}让我们来分析下它的作用。
首先，ref有两种形式（曾经有3种）：
- 形如
{current: T}的数据结构 - 回调函数形式，会在
ref更新、销毁时触发
例子中的setDOM是useState的dispatch方法，也有两种调用形式：
- 直接传递更新后的值，比如
setDOM(xxx) - 传递更新状态的方法，比如
setDOM(oldDOM => return /* 一些处理逻辑 */)
在例子中，虽然反常，但ref的第二种形式和dispatch的第二种形式确实是契合的。
也就是说，在例子中传递给ref的setDOM方法，会在div对应DOM更新、销毁时执行，那么dom状态中保存的就是div对应DOM的最新值。
这么做一定程度上实现了感知DOM的实时变化，这是单纯使用ref无法具有的能力。
useMemo的奇怪用法
通常我们认为useMemo用来缓存变量props，useCallback用来缓存函数props。
但在实际项目中，如果想通过缓存props的方式达到子组件性能优化的目的，需要同时保证：
- 所有传给子组件的
props的引用都不变（比如通过useMemo） - 子组件使用
React.memo
类似这样：
function App({todos, tab}) {
const visibleTodos = useMemo(
() => filterTodos(todos, tab),
[todos, tab]);
return <Todo data={visibleTodos}/>;
}
// 为了达到Todo性能优化的目的
const Todo = React.memo(({data}) => {
// ...省略逻辑
})既然useMemo可以缓存变量，为什么不直接缓存组件的返回值呢？类似这样：
function App({todos, tab}) {
const visibleTodos = useMemo(
() => filterTodos(todos, tab),
[todos, tab]);
return useMemo(() => <Todo data={visibleTodos}/>, [visibleTodos])
}
function Todo({data}) {
return <p>{data}</p>;
}如此，需要性能优化的子组件不再需要手动包裹React.memo，只有当useMemo依赖变化后子组件才会重新render。
总结
除了这两种奇怪的写法外，你还遇到哪些奇怪的React写法呢？
相关文章
这篇文章主要为大家详细介绍了React实现轮播图效果，使用react-slick组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了React-Native 环境搭建和基本介绍的相关资料,包括react native优缺点，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2021-04-04
React 中的事件，是对原生事件的封装，叫做合成事件。抽象出一层合成事件，是为了做兼容，抹平不同浏览器之间的差异。本文将从事件绑定和事件触发角度，带大家解读下源码，感兴趣的可以了解一下2022-12-12
这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了关于react useState更新异步问题，具有很好的参考价值，希望对大家有所帮助。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。2022-08-08
Native Memory Tracking追踪区域示例分析
这篇文章主要为大家介绍了Native Memory Tracking追踪区域示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
React组件有哪些生命周期函数？类组件才有的生命周期函数，分为几个阶段：挂载，更新，卸载，错误处理，本文主要介绍了这个阶段，感兴趣的可以了解一下2021-06-06
这篇文章主要为大家详细介绍了介绍了React类式组件中setState的三种写法以及简单讨论下setState 到底是同步的还是异步的,感兴趣的可以了解下2024-02-02
useEffect是React中的一个钩子函数,用于处理副作用操作,这篇文章主要为大家介绍了React中useEffect函数的具体用法,希望对大家有所帮助2023-08-08
这篇文章主要介绍了React中使用Axios发起POST请求提交文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论