大家好，我卡颂。

尽管React官网用大量篇幅介绍最佳实际，但因JSX语法的灵活性，所以总是会呈现奇奇怪怪的React写法。

本文介绍2种奇怪（但在某些场景下有意义）的React写法。也欢送大家在评论区探讨你遇到过的奇怪写法。

欢送退出人类高质量前端交换群，带飞

ref的奇怪用法

这是一段初看让人很困惑的代码：

function App() {  const [dom, setDOM] = useState(null);   return <div ref={setDOM}></div>;}

让咱们来剖析下它的作用。

首先，ref有两种模式（已经有3种）：

  1. 形如{current: T}的数据结构
  2. 回调函数模式，会在ref更新、销毁时触发

例子中的setDOM是useState的dispatch办法，也有两种调用模式：

  1. 间接传递更新后的值，比方setDOM(xxx)
  2. 传递更新状态的办法，比方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写法呢？