# react-demos-plus

**Repository Path**: react---special-topics/react-demos-plus

## Basic Information

- **Project Name**: react-demos-plus
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-15
- **Last Updated**: 2024-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 知识点

## useMemo 性能优化

它是用于react渲染过程 中的性能优化。
适用于: 父组件要进行更新，子组件的重新render计算量比较大，而且结果可以复用。就可以使用useMemo来提升父组件引起子组件不必要染的性能优化。

**应用场景：**

useMemo在项目中一定是不得已用才使用。

1. useMemo本身有性能消耗，缓存消耗内存，useMemo自身状态的维护也是有性能开销的
2. useMemo会增加开发成本，代码变的很复杂不好维护
3. react官方在未来会取消useMemo这个钩子


## React.memo
可以阻止父组件渲染引起的子组件(组件本身)更新。


## useCallback 

可以对函数缓存

**useMemo 和 useCallback 的区别**
实际上没有本质区别，一个用来缓存数据，一个用来缓存函数，纯粹为了代码可读性


## useTransition  用户体验优化
演示React真正意义上比Vue厉害的地方。

用于性能，用于用户体验。特性:并发更新(fiber架构)，16.8版本之后


## useTransition和useDeferredValue的区别?
解决的问题是一样的。

只是应用场景有点细微的区别。

一般useDeferredValue比较适合用于组件接受的Props参数导致染缓慢的优化。

useTransition比较适合在自己组件内部本身来进行优化。


##　useDebugValue的作用?
可以利用调试工具，做组件级别的debug。全部用console堆在一起，不方便。
记得开启严格模式!!!

## useId
生成唯一不重复的 `id`，但是保持同一个位置的 id 每次渲染都一样


## *useRef* 与 *useImperativeHandle*
函数组件本身是无法挂 *Ref* 的，因此此时就需要使用 *React.forwardRef* 进行 *Ref* 的转发，之后配合 *useImperativeHandle* 来自定义要暴露给父组件的实例值。