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

我们来看下下面的例子：

import React, { useState } from "react";  
import ReactDOM from "react-dom";  
  
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="Bar" />  
    </div>  
  );  
}  
  
function Foo({ hideFoo }) {  
  return (  
    <>  
      <h1>Foo</h1>  
      <button onClick={hideFoo}>Hide Foo</button>  
    </>  
  );  
}  
  
function Bar({ name }) {  
  return <h1>{name}</h1>;  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);  

可以看到，只要父组件 App 的状态值 isFooVisible 发生变化，Foo 和 Bar 就都会被重新渲染。

这里因为为了决定 Foo 是否要被渲染出来，我们需要将 isFooVisible 放在 App中维护，因此也就不能将状态拆出放到更低的层级。不过，在 isFooVisible 发生变化时重新渲染 Bar 仍然是不必要的，因为 Bar 并不依赖 isFooVisible。我们只希望 Bar 在传入属性 name 变化时重新渲染。

那我们该怎么搞呢？两种方法。

其一，对 Bar 做记忆化（memoize）：

const Bar = React.memo(function Bar({name}) {  
  return <h1>{name}</h1>;  
});  

这就能保证 Bar 只在 name 发生变化时才重新渲染。

此外，另一个方法就是让 Bar 继承 React.PureComponent 而非 React.Component：

class Bar extends React.PureComponent {  
 render() {  
   return <h1>{name}</h1>;  
 }  
}  

是不是很熟悉？我们经常提到使用 React.PureComponent 能带来一定的性能提升，避免不必要的 render。

总结：避免组件不必要的渲染的方法有：React.memo 包裹的函数式组件，继承自 React.PureComponent 的 class 组件。

为什么不让每个组件都继承 PureComponent 或者用 memo 包呢？

（编辑：ASP站长网）