你可能不需要Memo

提到React的性能优化，大家的脑海中应该会出现useMemo、Memo、useCallBack这些词。这些都是官方提供的性能优化hooks，确实也解决了我们日常工作中遇到的大部分性能优化问题。

在看了某网红(Dan Abramov)的文章后，我想和大家分享两种不使用这些hooks解决性能问题的方式。
让我们先来看个例子:

import {useState}from 'react';

const TimeMashine = ()=>{
  const now = Date.now();
  console.log('111')
  return (<p>I am time mashine</p>)
}

const App = ()=>{
  const [count,setCount]=useState(0);
  const onClick=()=>{
    const newCount=count+1;
    setCount(newCount)
  }
  return (<div>
    <button onClick={onClick}>click me</button>
    <p>I clicked button {count} times</p>
    <TimeMashine/>
  </div>)
}

export default App

这个组件有着严重的性能问题，其中TimeMashine组件在按钮被点击的时候都会重复渲染。除了官方提供的Memo等优化方式，这里有还有两种方式可以做优化。

一、state位置调整

const App = ()=>{
  const [count,setCount]=useState(0);
  const onClick=()=>{
    const newCount=count+1;
    setCount(newCount)
  }
  return (<div>
    <button onClick={onClick}>click me</button>
    <p>I clicked button {count} times</p>
    <TimeMashine/>
  </div>)
}

仔细看这段代码，我们会发现这个按钮点击只是更新p标签中的文本内容，TimeMashie组件其实并不关心点击事件。

import { useState }from 'react';

const TimeMashine = ()=>{
  const now = Date.now();
  console.log('I am updated')
  return (<p>I am time mashine</p>)
}

const Text = ()=>{
  const [count,setCount]=useState(0);
  const onClick=()=>{
    const newCount=count+1;
    setCount(newCount)
  }
  return (<>
    <button onClick={onClick}>click me</button>
    <p>I clicked button {count} times</p>
    </>)
}

const App = ()=>{
  return (<div>
   <Text/>
    <TimeMashine/>
  </div>)
}

export default App

二、内容提升

让我来看另外一种情况

import {useState}from 'react';
const TimeMashine = ()=>{
  const now = Date.now();
  console.log('I am updated')
  return (<p>I am time mashine</p>)
}

const App = ()=>{
  const [count,setCount]=useState(0);
  const onClick=()=>{
    const newCount=count+1;
    setCount(newCount)
  }
  return (<div>
      <p>I clicked button {count} times</p>
      <div>
        <button onClick={onClick}>click me</button>
        <TimeMashine/>
      </div>
  </div>)
}

export default App

可以看到 I clicked button {count} times被提升到了外面，显然不能再用方式一的办法来处理。

import {useState}from 'react';
const TimeMashine = ()=>{
  const now = Date.now();
  console.log('I am updated')
  return (<p>I am time mashine</p>)
}

const TimeAndText = ({children})=>{
  const [count,setCount]=useState(0);
  const onClick=()=>{
    const newCount=count+1;
    setCount(newCount)
  }
  return (<>
      <p>I clicked button {count} times</p>
      <div>
        <button onClick={onClick}>click me</button>
        {children}
      </div>
  </>)
}

const App = ()=>{
  return (
      <TimeAndText>
        <TimeMashine/>
      </TimeAndText>)
}

export default App

我们把按钮文本提取为独立的组件,TimMashine作为依赖传入TimeAndtext组件。当点击按钮的时候，TimeAndtext会更新，但是children作为依赖没有变化所以不会更新。
Dan认为这种模式本身并不是为了提高性能而写的，这种模式的目的是为了减少组件的props参数数量而产生，但是意外的解决了性能上的问题。这个问题确实值得我们思考。

参考

• Before You memo -- Dan Abramov