React 性能优化技巧总结

我们来看下下面的例子：

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>;  
 }  
}  

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!