关于前端:你可能不需要Memo

36次阅读

共计 2337 个字符,预计需要花费 6 分钟才能阅读完成。

提到 React 的性能优化,大家的脑海中应该会呈现 useMemoMemouseCallBack 这些词。这些都是官网提供的性能优化 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

正文完
 0