React 小技巧 (｡･∀･)ﾉﾞ

[LinkXSystem]

用于记录一些常见的 React 的小技巧的代码片段

[LinkXSystem]

优化技巧

• 在 class 语法中，使用 shouldComponentUpdate 和 PureComponent 来规避不必要的 render 渲染。 而在 function 语法中，则使用 React.mome 来实现，用法如下：

  
  function CustomComponent({...}) {}

function shouldFunctionUpdate(prevProps, nextProps) { // 与 shouldComponentUpdate 作用相似 return false; }

export default React.memo(CustomComponent, shouldFunctionUpdate);

- useMemo  可以缓存函数的计算结果。用法如下：

```js

function sleep() {
   return ....
}

// 参数格式:
//        函数，需要缓存的函数
//        控制是否重新计算的数组
const  result  = useMome(sleep, [x, y]);

• useCallback 与 useMome 作用上是相似的，在 function 语法中，传递的函数，尽管属性未发生变化，传递函数的引用的属性也存在引用变化诱发新的渲染