react 项目中的优化

react v16.6之后 的按需加载（2019.07.04更新）

React这个版本新加了lazy和Suspense这两个功能。
对于上面的按需加载，可以修改代码为：

import React, { Suspense } from 'react';
import Loading from './my-loading-component';

const LoadableComponent = React.lazy(() => import('./my-component'));

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

lazy和Suspense相关文章

减少不必要的props引起的重绘

1. shouldComponentUpdate (nextProps,nextState)
   优化性能，接下来的组件要不要更新
   如果写了shouldComponentUpdate，就一定要有返回值return true，不然为false。
   不写这个钩子函数默认返回一个true，只有在true的情况下，下面三个钩子函数才会执行

// 当state中的data发生改变的时候才触发render（返回 true 时触发 render）
shouldComponentUpdate(nextProps, nextState) {
  if (nextState.data !== this.state.data) {
    return true
  }
  return false
}

2. useMemo
   Hooks组件则可以使用React.memo ，普通的 React.memo和PureComponent很像,对props做一层浅比较，如果没发生变更则不执行重绘。
   如果在Hooks针对特殊场景的比较，就需要传入React.memo的第二个参数compare, 来手动判断是否需要渲染。例如对于一个普通受控组件，当defaultValue发生变更时无需重绘组件，所以可以用下面的代码实现。

function MyComponent({ defaultValue, value, onChange }) {
  return null;
}

function compare(prevProps, props) {
  return prevProps.value === props.value && 
         prevProps.onChange === props.onChange;
}

export default React.memo(MyComponent, compare);