# react-demo

**Repository Path**: fanxiaopa/react-demo

## Basic Information

- **Project Name**: react-demo
- **Description**: 记录一些react知识点，想到什么就做些什么demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-09-05
- **Last Updated**: 2021-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## React的小Demo

这些demo仅用于记录知识点

现有记录知识点：
- react路由跳转
- antd的modal框
- react单元测试
- Echart实例
- react的渲染时机

小demo都放在 src/test 目录下

单元测试的案例放在 test目录下


###  React组件的render时机

#### render需要满足的条件
<a href="https://mp.weixin.qq.com/s/Ey54DZ-jNDGarSHUoRbxXA" target="_blank">参考</a>

React创建Fiber树时，每个组件对应的fiber都是通过如下两个逻辑之一创建的：

- render。即调用render函数，根据返回的JSX创建新的fiber。

- bailout。即满足一定条件时，React判断该组件在更新前后没有发生变化，则复用该组件在上一次更新的fiber作为本次更新的fiber。

#### bailout需要满足的条件

1、oldProps === newProps ？

即本次更新的props（newProps）不等于上次更新的props（oldProps）。

注意这里是全等比较。

我们知道组件render会返回JSX，JSX是React.createElement的语法糖。

所以render的返回结果实际上是React.createElement的执行结果，即一个包含props属性的对象。

即使本次更新与上次更新props中每一项参数都没有变化，但是本次更新是React.createElement的执行结果，是一个全新的props引用，所以oldProps !== newProps。

如果我们使用了PureComponent或Memo，那么在判断是进入render还是bailout时，不会判断oldProps与newProps是否全等，而是会对props内每个属性进行浅比较。

2. context没有变化

即context的value没有变化。

3. workInProgress.type === current.type ？

更新前后fiber.type是否变化，比如div是否变为p。

4. !includesSomeLane(renderLanes, updateLanes) ？

当前fiber上是否存在更新，如果存在那么更新的优先级是否和本次整棵fiber树调度的优先级一致？

如果一致则进入render逻辑。