面试官：React的memo第二个参数是什么？请实现一个memo

站长

2023年08月18日 16:19 · 阅读数 10

前言

最近网上冲浪时看到了这道面试题，虽然不是自己面试，但是每当看到别人发面试题时，自己都会心里默想自己能不能回答上来。这次也是，第一个提问挺好回答，第二个我就一时想不出来了，心里不经颤抖，所以赶紧总结起来。

React的memo第二个参数

React的新文档其实挺详细的，memo的用法：memo(Component, arePropsEqual?)。

第二个参数arePropsEqual是用来判断新旧的props是否相等，相等则返回true，代表组件不用更新，否则相反。一般第二个参数可不传，React默认会对props进行浅比较。

那啥时候用第二个参数，这里举个简单的例子

const App = () => {
  const [name, setName] = useState('')
  const [age, setAge] = useState('')
  return (
    <>
      <label>
        名称：
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        年龄：
        <input value={age} onChange={e => setAge(e.target.value)} />
      </label>
      <Profile profile={{ name, age }} />
    </>
  )
}

const Profile = memo(({ profile }) => {
  const { name, age } = profile
  return (
    <ul>
      <li>名称：{name}</li>
      <li>年龄：{age}</li>
    </ul>
  )
})

在上面的例子中，Profile组件记忆化（memoized）根本无意义，因为传入的 props 中 profile 属性永远是新对象。

那么我们可以手动比较 props。

function arePropsEqual({ profile: oldProfile }, { profile: newProfile }) {  
  return oldProfile.name === newProfile.name && oldProfile.age === newProfile.age
}

const Profile = memo(({ profile }) => {
  const { name, age } = profile
  return (
    <ul>
      <li>名称：{name}</li>
      <li>年龄：{age}</li>
    </ul>
  )
}, arePropsEqual)

上面只是举例了 memo 第二个参数的使用，当然这其实并不是一个好的做法。我们也许在 Profile 组件外部就应该把 profile 属性记忆化（memoized），例如

const App = () => {
  const [name, setName] = useState('')
  const [age, setAge] = useState('')
  
  const profile = useMemo(() => ({ name, age }), [name, age])
  
  return (
    <>
      <label>
        名称：
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        年龄：
        <input value={age} onChange={e => setAge(e.target.value)} />
      </label>
      <Profile profile={profile} />
    </>
  )
}

这种做法也不一定是最好的，react文档更推荐最小化 props 的变化。如下，其实就是把属性分开传进组件。

const App = () => {
  const [name, setName] = useState('')
  const [age, setAge] = useState('')
  
  return (
    <>
      <label>
        名称：
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        年龄：
        <input value={age} onChange={e => setAge(e.target.value)} />
      </label>
      <Profile name={name} age={age} />
    </>
  )
}

const Profile = memo(({ name, age }) => {
  return (
    <ul>
      <li>名称：{name}</li>
      <li>年龄：{age}</li>
    </ul>
  )
})

那这样子，我们其实还是没必要手动使用 memo 的第二个参数，也确实，一般开发过程中很少去用。我再举个可能用到的场景。例如，在项目中封装了一个业务组件，需求比较明确，场景比较专一。

const MyCard = memo(({ onClick, style }) => {
  return (
    <div className="card" onClick={onClick} style={style}>
      {/* 省略很多要显示的内容... */}
    </div>
  )
// 不需要跟着父组件更新渲染
}, () => true)

const App = () => {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(c => c + 1)
    alert('hello')
  }
  
  return (
    <button onClick={() => setCount(c => c + 1)}>{count}</button>
    {/* ... */}
    <MyCard onClick={handleClick} style={{ marginTop: 20 }} />
  )
}

如上面的例子，MyCard是一个需要展示挺多内容的组件，由于需求比较明确传入的属性不会变化，那么直接把 memo 的第二个参数传入函数始终返回 true。因此，外部的 onClick 就可以懒得用 useCallback 包裹了（当然要注意闭包问题），style 也是。