# react

**Repository Path**: lymenn/react

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-16
- **Last Updated**: 2023-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

优化:
# 减少组件渲染次数
- 默认情况，只要父组件状态变了（不管子组件依不依赖该状态），子组件也会重新渲染
1. 类组件：可以使用 pureComponent 
2. 函数组件：使用 React.memo ，将函数组件传递给 memo 之后，就会返回一个新的组件，新组件的功能：如果接受到的属性不变，则不重新渲染函数。useCallback保证函数属性不变，useMemo保证状态属性不变。它们都有一个依赖数组，只有当依赖项的值改变，才返回新的返回新值，从而触发子组件更新
-  effect 进行性能优化
1. 依赖项数组控制着 useEffect 的执行.可以传递一个空数组（[]）作为第二个参数,让effect只执行一次
- useLayoutEffect 和 useEffect区别
1. useEffect 在全部渲染完毕后才会执行。尽可能使用标准的 useEffect 以避免阻塞视图更新
2. useLayoutEffect 会在 浏览器 layout 之后，painting 之前执行。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新
- 为什么必须在组件的顶层使用 Hook & 在单个组件中使用多个 State Hook 或 Effect Hook，那么 React 怎么知道哪个 state 对应哪个 useState
1. 只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联
- 自定义 Hook 必须以 use 开头吗？
1. 须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则
- 在两个组件中使用相同的 Hook 会共享 state 吗？
1. 不会。自定义 Hook 是一种重用_状态逻辑_的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的