2奇怪的React写法
时间：2023-03-28 16:46:10
HTML
大家好，我是卡松。虽然React官网花了大量篇幅介绍最佳实践，但是由于JSX语法的灵活性，总会有React写的怪怪的。本文介绍了2种奇怪（但在某些场景下有意义）的React编写方式。也欢迎大家在评论区讨论自己遇到的奇葩写法。欢迎加入人类优质前端交流群，飞天ref的奇葩用法这是一段乍一看很迷惑的代码：functionApp(){const[dom,setDOM]=useState(null);return
;}我们来分析一下它做了什么。首先，ref有两种形式（以前有3种）：数据结构回调函数形式如{current:T}，当ref更新或销毁时会触发。例子中的setDOM是useState的dispatch方法，调用Form也有两种：直接传更新值，如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：return
;}//以达到Todo性能优化的目的constTodo=React.memo(({data})=>{//...省略逻辑})SinceuseMemo可以缓存变量，为什么不直接缓存组件的返回值呢？像这样：functionApp({todos,tab}){constvisibleTodos=useMemo(()=>filterTodos(todos,tab),[todos,tab]);returnuseMemo(()=>
,[visibleTodos])}functionTodo({data}){return
{data}
;}这样子组件需要性能优化不再需要手动包装React.memo，只有当useMemo依赖时，子组件才会在更改后重新渲染。总结除了这两种奇怪的写法，你还遇到过哪些React的奇怪写法呢？
