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来替代掉无意义的标签。