React優化

使用動態import來分割代碼

使用動態import來“懶加載”代碼，如果你沒辦法直接減少應用的體積，那麼不妨嘗試把應用從單個 bundle 拆分成單個 bundle + 多份動態代碼的形式。

方法一：使用動態import

import("./math").then(math => {
  console.log(math.add(16, 26));
});

方法二：引用react的高階組件react-loadable進行動態import

import Loadable from 'react-loadable';
import Loading from './loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

shouldComponentUpdate避免重複渲染

我們可以通過根據自己的業務特性，重載shouldComponentUpdate，只在確認真實DOM需要改變時，再返回true。一般的做法是比較組件的props和state是否真的發生變化，如果發生變化則返回true，否則返回false

合理的使用key

在組件發生增刪改、排序等操作時，可以根據key值的位置直接調整DOM順序，告訴React 避免不必要的渲染而避免性能的浪費

合理的拆分和使用組件

合理的拆分組件以提高組件的規範性和複用性。合理的使用類組件和函數組件

合理的傳遞props

props儘量只傳需要的數據，避免多餘的更新，儘量避免使用{...props}，防止將不需要的屬性傳遞給子組件

在constructor中綁定this

因爲在constructor中對函數進行this的綁定只需要綁定一次。

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this); //構造函數中綁定
}
//然後可以
<p onClick={this.handleClick}>

若在使用時綁定則會每次調用時都要重新綁定

<p onClick={this.handleClick.bind(this)}>

對錯誤邊界的處理

錯誤邊界是一種 React 組件，這種組件可以捕獲並打印發生在其子組件樹任何位置的 JavaScript 錯誤，並且，它會渲染出備用 UI，而不是渲染那些崩潰了的子組件樹。錯誤邊界在渲染期間、生命週期方法和整個組件樹的構造函數中捕獲錯誤。

如果一個 class 組件中定義了 static getDerivedStateFromError() 或 componentDidCatch() 這兩個生命週期方法中的任意一個（或兩個）時，那麼它就變成一個錯誤邊界。當拋出錯誤後，請使用 static getDerivedStateFromError() 渲染備用 UI ，使用 componentDidCatch() 打印錯誤信息。

Fragment替代無意義的標籤

使用Fragment來替代掉無意義的標籤。