React 性能优化技巧总结(6)

如果这条建议可以让我们避免不必要的重新渲染，那我们为什么不把每个 class 组件变成 PureComponent、把每个函数式组件用 React.memo 包起来？为什么有了更好的方法还要保留 React.Component 呢？为什么函数式组件不默认记忆化呢？

毫无疑问，这些方法并不总是万灵药。

嵌套对象的问题

我们先来考虑下 PureComponent 和 React.memo 的组件到底做了什么？

每次更新的时候（包括状态更新或上层组件重新渲染），它们就会在新 props、state 和旧 props、state 之间对 key 和 value 进行浅比较。浅比较是个严格相等的检查，如果检测到差异，render 就会执行：

// 基本类型的比较  
shallowCompare({ name: 'bar'}, { name: 'bar'}); // output: true  
shallowCompare({ name: 'bar'}, { name: 'bar1'}); // output: false  

尽管基本类型（如字符串、数字、布尔）的比较可以工作的很好，但对象这类复杂的情况可能就会带来意想不到的行为：

shallowCompare({ name: {first: 'John', last: 'Schilling'}},  
               { name: {first: 'John', last: 'Schilling'}}); // output: false  

上述两个 name 对应的对象的引用是不同的。

我们重新看下之前的例子，然后修改我们传入 Bar 的 props：

import React, { useState } from "react";  
import ReactDOM from "react-dom";  
  
const Bar = React.memo(function Bar({ name: { first, last } }) {  
  console.log("Bar render");  
  
  return (  
    <h1>  
      {first} {last}  
    </h1>  
  );  
});  
  
function Foo({ hideFoo }) {  
  return (  
    <>  
      <h1>Foo</h1>  
      <button onClick={hideFoo}>Hide Foo</button>  
    </>  
  );  
}  
  
function App() {  
  const [isFooVisible, setFooVisibility] = useState(false);  
  
  return (  
    <div className="App">  
      {isFooVisible ? (  
        <Foo hideFoo={() => setFooVisibility(false)} />  
      ) : (  
        <button onClick={() => setFooVisibility(true)}>Show Foo</button>  
      )}  
      <Bar name={{ first: "John", last: "Schilling" }} />  
    </div>  
  );  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);  

尽管 Bar 做了记忆化且 props 值并没有发生变动，每次父组件重新渲染时它仍然会重新渲染。这是因为尽管每次比较的两个对象拥有相同的值，引用并不同。

函数 props 的问题

我们也可以把函数作为 props 向组件传递，当然，在 JavaScript 中函数也会传递引用，因此浅比较也是基于其传递的引用。

因此，如果我们传递的是箭头函数（匿名函数），组件仍然会在父组件重新渲染时重新渲染。

Tip #4：更好的 props 写法

前面的问题的一种解决方法是改写我们的 props。

我们不传递对象作为 props，而是 将对象拆分成基本类型 ：

<Bar firstName="John" lastName="Schilling" />  

（编辑：ASP站长网）