# react-study

**Repository Path**: zhuyag/react-study

## Basic Information

- **Project Name**: react-study
- **Description**: react 研究 调查 深入 分析 讲解
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/zhuyag/react-study
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-08
- **Last Updated**: 2023-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, JavaScript, Less

## README

# React

## 生命周期

### 类组件

#### 装载过程(`Mount`)

#### 更新过程(`Update`)

#### 卸载过程(`Unmount`)

### 函数组件

在函数组件中没有周期函数，但是可以使用`Hooks`方法模拟周期函数

#### 装载过程

- `constructor`：通过调用`useState`/`useReudcer`来初始化`state`
- `getDerivedStateFromProps`：通过调用`useMemo`创建动态关联派生数据
- `componentDidMount`：通过`useEffect`传入第二个参数为`[]`实现

#### 更新过程

- `shouldComponentUpdate`：可以使用`React.memo`对函数组件的`props`进行浅比较，来模拟是否更新组件
- `componentDidUpdate`：通过`useEffect`传入第二个参数为空或者为值变动的数组

#### 卸载过程

- `componentWillUnmount`：主要用来清楚副作用。通过`useEffect`函数`return`一个函数来模拟

```ABAP
useEffect 可以代替类组件中 componentDidMount，componentDidUpdate，componentWillUnmount 等生命周期函数组合起来使用的所有场景，但是实际的操作思路是不一样的。不能完全使用生命周期的思路去理解 useEffect。
```

## ReactDOM API

### `portal`传送门

利用 `ReactDOM.createPortal` 方法可以控制将子组件渲染在父组件以外的任意 `DOM` 标签中

```jsx
import { createPortal } from "react-dom";

const Inner = () => {
    // 参数一：必需，任何可渲染的`React`子元素，例如组件（组合）、元素（片段）或字符串等
    // 参数二：必需，一个原生`DOM`标签元素
    return createPortal(<div></div>,document.body)
}
```

```ABAP
就是我们写弹出框的时候，如果把标签渲染在组件内，那么很容易造成性能浪费，通过`createPortal`可以将组件标签追加到父组件外
```

## 动画管理

### React-Transition-Group

```shell
npm i react-transition-group
```

### `CSSTranstion`组件

该组件内部只能包含一个组件或元素，用于完成单组件过渡效果

#### 过渡阶段

- `appear`：组件初始化，刚进入页面时
- `enter`：组件进入，组件从隐藏到显示，或组件被创建时
- `exit`：组件离开，组件从显示到隐藏，或组件被卸载时

#### 过渡常用属性

|     属性名      |      | 作用                                                         |       类型        |
| :-------------: | :--: | ------------------------------------------------------------ | :---------------: |
|      `in`       | 必填 | 控制播放指定阶段的过渡动画<br />`true` 播放进入动画<br />`false` 播放离开动画 |     `Boolean`     |
|  `classNames`   | 必填 | 值为字符串时用于设置组件内置过渡类名前缀<br />值为对象时用于设置自定义过渡类名 | `String`/`Object` |
|    `timeout`    | 必填 | 控制过渡类名`*-active`的持续使用的时间或退出过渡动画后使用`unmountOnExit`选项移出`DOM`的时间，一般和样式设置的动画时长相等，单位`ms` |     `Number`      |
|    `appear`     | 可选 | 控制元素/组件是否启用初始化过渡效果，要求组件 `in` 属性初始值为 `true` 才会触发 `appear` 过渡效果 |     `Boolean`     |
| `unmountOnExit` | 可选 | 控制在退出过渡动画结束后，是否移除 `DOM` 元素。若设置为移除，在进入过渡动画时会重新创建包含的元素/组件 `DOM` |     `Boolean`     |

```less
// 组件进入
.switch-enter-active {
  animation: enter 1s;
}

@keyframes enter {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

// 组件离开
.switch-exit-active {
  animation: exit 1s;
}

@keyframes exit {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
```