React 性能优化 | NaturelLee Blogs

# 性能优化

在以下场景中，父组件和子组件通常会重新渲染： 1. 在同一组件或父组件中调用 setState 时。 2. 从父级收到的“props”的值发生变化。 3. 调用组件中的 forceUpdate。

# 方式

1. 使用纯组件
2. 使用 React.memo 进行组件记忆
3. 使用shouldComponentUpdate生命周期事件
4. 懒加载组件

ComponentToLazyLoad = lazy(() => import('./mayankComponent'));
<Suspense fallback={<div>Loading...</div>}>
  <ComponentToLazyLoad />
</Suspense>;

1
2
3
4

5. 使用 React Fragments 避免额外标记
6. 不要使用内联函数定义

<input
  type="button"
  onClick={(e) => {
    this.setState({ inputValue: e.target.value });
  }}
  value="Click For Inline Function"
/>

1
2
3
4
5
6
7

7. 避免componentWillMount()中的异步请求
8. 在 Constructor 的早期绑定函数

constructor() {
    this.state = {name: "Mayank"}
    this.handleButtonClick = this.handleButtonClick.bind(this)
}

1
2
3
4

9. 箭头函数与构造函数中的绑定
10. 避免使用内联样式属性
11. 优化 React 中的条件渲染
12. 不要在 render 方法中导出数据  我们的核心原则是将 render() 函数作为纯函数
13. 为组件创建错误边界
	错误边界涉及一个高阶组件，包含以下方法：static getDerivedStateFromError() 和 componentDidCatch()。
14. 组件的不可变数据结构
15. 使用唯一键key迭代
16. 事件节流和防抖 https://www.npmjs.com/package/throttle-debounce
17. 使用 CDN
18. 用 CSS 动画代替 JavaScript 动画
19. 在 Web 服务器上启用 gzip 压缩
20. 使用 Web Workers 处理 CPU 密集任务
21. React 组件的服务端渲染

# Virtual Dom Diff

1. 两个简单的假设
	a. 相同组件产生类似的 DOM 结构，不同组件产生不同的 DOM 结构
	b. 同一层子节点通过唯一的 id 进行区分
2. 节点不同：
	a. 节点类型不同
		i. 彻底删除旧节点（包括其子节点），插入新节点
		ii. 推论：逐层进行节点比较
		iii. 推论：保持组件稳定的 DOM 结构会有助于性能的提升(css控制组件的显示或删除)
	b. 节点类型相同，属性不同
		i. 对属性进行重设
		ii. 属性值是对象
	c. 列表节点比较：
		i. 提供唯一的key

# HOC

修饰器本质就是编译时执行的函数

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

1
2
3
4
5

需要再详细理解其作用

rc-from reactHOC … react 高阶组件理解: 1. 什么是高阶组件？高阶组件就是接受一个组件作为参数并返回一个新组件的函数高阶组件通过包裹（wrapped）被传入的 React 组件，经过一系列处理，最终返回一个相对增强（enhanced）的 React 组件，供其他组件调用 A HOC is a pure function with zero side-effects. 2. “包裹”的概念，可能有以下两种不同的含义之一： a. Props Proxy： HOC 对传给 WrappedComponent W 的 props 进行操作， b. Inheritance Inversion： HOC 继承 WrappedComponent W。

function ppHOC(WrappedComponent) {
  return class PP extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

function iiHOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      return super.render();
    }
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5. React-Redux 是 Redux 官方的 React 绑定实现。他提供的函数中有一个 connect，处理了监听 store 和后续的处理。是通过 Props Proxy 来实现的。