# react_performance_optimization

**Repository Path**: ZHYCH992/react_performance_optimization

## Basic Information

- **Project Name**: react_performance_optimization
- **Description**: React 性能优化 useContext() 的渲染机制 ,React.memo() 和 useMemo() 的用法和区别,什么是 HOC 高阶组件
> useContext 的渲染机制
> React.memo 和 useMemo 的区别
> 通过 React.memo 实现 props 无变化时不重新执行
> 通过 useMemo 实现自定义渲染、局部渲染
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-14
- **Last Updated**: 2024-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 性能优化 useContext() 的渲染机制 ,React.memo() 和 useMemo() 的用法和区别,什么是 HOC 高阶组件

> useContext 的渲染机制
> React.memo 和 useMemo 的区别
> 通过 React.memo 实现 props 无变化时不重新执行
> 通过 useMemo 实现自定义渲染、局部渲染

在软件开发中，我们通常痴迷于性能提升以及如何使我们的应用程序执行得更快，从而为用户提供更好的体验。
Memoization 是优化性能的方法之一。 在本文中，我们将探讨它在 React 中的工作原理。
什么是 memoization？
在解释这个概念之前，让我们先来看一个简单的斐波那契程序：

```js
javascript 代码解读复制代码 function fibonacci(n){
return (n < 2) ? n : fibonacci(n-1) + fibonacci(n-2);
}
```

显然这个算法缓慢的令人绝望，因为做了非常多的冗余计算，这个时候 memoization 就可以派上用场了！
简单来说，memoization 是一个过程，它允许我们缓存递归/昂贵的函数调用的值，以便下次使用相同的参数调用函数时，返回缓存的值而不必重新计算函数。
这确保了我们的应用程序运行得更快，因为我们通过返回一个已经存储在内存中的值来避免重新执行函数需要的时间。
为什么在 React 中使用 memoization？
在 React 函数组件中，当组件中的 props 发生变化时，默认情况下整个组件都会重新渲染。 换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括尚未更改其 values/props 的函数/组件。

# 什么是 HOC 高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。 HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
具体而言高阶组件是参数为组件，返回值为新组件的函数。通常用于在组件之间复用逻辑，例如状态管理、数据获取、访问控制等。

让我们通过一个简单的示例来了解如何创建和使用高阶组件。我们将创建一个名为 withLoading 的高阶组件，它将在加载状态下显示一个加载指示器。

```js
function withLoading(WrappedComponent) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Loading...</div>;
    } else {
      return <WrappedComponent {...props} />;
    }
  };
}
```

示例二，我们创建一个名为 withContext 的高阶组件，它将接受 context 参数并注入到组件的 props 中。

```js
const withContext = (Component) => (...props,context) => {
  const ctx = useContext(TestContext);
  console.log("withCountHocFun执行");
  return (
    <div className="component">
      <h1>{props.title}</h1>
      <Component {...props} />
    </div>
  );
};
```

# 什么是 React.memo()？

React.memo() 随 React v16.6 一起发布。 虽然类组件已经允许您使用 PureComponent 或 shouldComponentUpdate 来控制重新渲染，但 React 16.6 引入了对函数组件执行相同操作的能力。
React.memo() 是一个高阶组件 (HOC)，它接收一个组件 A 作为参数并返回一个组件 B，如果组件 B 的 props（或其中的值）没有改变，则组件 B 会阻止组件 A 重新渲染 。

```js
const StatelesComponent = React.memo(() => {
  const countRef = useRef(0);
  console.log("statelessComponentFun执行");
  return (
    <div>
      <h1>statelessComponent</h1>
      <p>returnUpdateCount: {++countRef.current}</p>
    </div>
  );
});
```

# 什么是 useMemo()？

React.memo() 是一个 HOC，而 useMemo() 是一个 React Hook。 使用 useMemo()，我们可以返回记忆值来避免函数的依赖项没有改变的情况下重新渲染。
为了在我们的代码中使用 useMemo()，React 开发者有一些建议给我们：

您可以依赖 useMemo() 作为性能优化，而不是语义保证
函数内部引用的每个值也应该出现在依赖项数组中

```js
const HocComponentA = withContext((props) => {
  const { setValue } = props.context;
  const returnUpdateCount = useRef(0);
  const res = useMemo(
    () => (
      <>
        <button
          onClick={() => {
            setValue(new Date().getTime());
          }}>
          Update
        </button>
        <p>returnUpdateCount: {++returnUpdateCount.current}</p>
      </>
    ),
    [setValue]
  );
  console.log("HocComponentAFun执行");
  return res;
});
```

# React.memo 和 useMemo 的区别

在 props 不变的情况，React.memo 完全不执行子组件代码，而 useMemo 依然会运行子组件的代码，只是不执行 return 渲染从而实现局部渲染。

# 运行截图

<img src="./src/assets/init.jpg"/>
<img src="./src/assets/update.png"/>

# 仓库地址：https://gitee.com/ZHYCH992/react_performance_optimization