在以下场景中，父组件和子组件通常会重新渲染：
- 在同一组件或父组件中调用 setState 时。
- 从父级收到的“props”的值发生变化。
- 调用组件中的 forceUpdate。
- 使用纯组件 React.PureComponent
- 使用shouldComponentUpdate生命周期事件
- 不要使用内联函数定义
onClick={(e) => { this.setState({inputValue: e.target.value}) }} // 这是内联函数
- 避免componentWillMount()中的异步请求 等请求到了会重新渲染，增加负担
- 在 Constructor 的早期绑定函数
- 箭头函数与构造函数中的绑定
- 避免使用内联样式属性
- 优化 React 中的条件渲染
- 事件节流和防抖
- 使用 CDN
- 用 CSS 动画代替 JavaScript 动画
- 在 Web 服务器上启用 gzip 压缩
- 使用 Web Workers 处理 CPU 密集任务
- React 组件的服务端渲染SSR
- 为组件创建错误边界
- 使用 React.memo 进行组件记忆
为组件创建错误边界
组件渲染错误是很常见的情况。
在这种情况下，组件错误不应该破坏整个应用。创建错误边界可避免应用在特定组件发生错误时中断。
错误边界是一个 React 组件，可以捕获子组件中的 JavaScript 错误。我们可以包含错误、记录错误消息，并为 UI 组件故障提供回退机制。
错误边界是基于高阶组件的概念。
错误边界涉及一个高阶组件，包含以下方法：static getDerivedStateFromError() 和 componentDidCatch()。
static 函数用于指定回退机制，并从收到的错误中获取组件的新状态。
componentDidCatch 函数用来将错误信息记录到应用中。
