# e-react

**Repository Path**: ymcdhr/e-react

## Basic Information

- **Project Name**: e-react
- **Description**: React 相关知识点：react + mobx +antd + fiber
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-22
- **Last Updated**: 2021-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

### [React 基础回顾](https://gitee.com/ymcdhr/e-code/tree/master/04-01-react%20fiber/04-01-study-materials/handouts/04-01-01-React%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE#1-react-%E4%BB%8B%E7%BB%8D)

## React

### React 基础
1. Fiber 架构
2. React Hooks 基本使用与原理
3. React [组件性能优化最佳实践](https://gitee.com/ymcdhr/e-code/tree/master/04-03-react-hooks-cssinjs/4-3-6-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/%E8%AE%B2%E4%B9%89)

4. 补充：React + Immutable.js 提升组件更新性能
-  **Immutable.js 使用场景：** 如果state结构较深，最里层的某个属性更新（如：state.a.b.c.d更新）；如果浅比较state无作用，深比较到d耗性能，可以结合Immutable.js做深比较性能好；
-  **Immutable.js 内部原理：** 使用链表，只拷贝改变的数据部分到新的地方，未改变的数据共用；
-  **Immutable.js + React 如何使用：** https://www.jianshu.com/p/825b7b4c401d

### React UI组件库
1. Antd：适合做企业管理平台
2. Chakra-UI：适合展示给用户的界面

### React Router

### React 状态管理
1. Redux 的基本使用与原理
2. Mobx 的基本使用与原理
3. Dva

### React 服务端渲染
1. React SSR
2. Next.js
3. Gatsby

---


面试题：

## React 虚拟DOM
1. 什么是 Virtual DOM？它有什么好处？
2. 模板引擎和 Virtual DOM 的关系？
3. React 是如何利用 Virtual DOM？
4. React workInProgress Fiber 树存在的意义是什么？






## React Fiber架构
1. React15 和 React16 算法上有什么不同？
2. React Fiber 架构
3. React 首次渲染流程
4. React15 Diff 算法【遗留问题】
5. React16 Diff 算法
6. React16 setState() 流程
7. react diff 算法时间复杂度为什么是 O(n) ？因为采用循环模拟递归，递归是O(n3)
8. react 数组渲染时为什么要加 key ，用 index 作为 key 可以吗，什么场景会触发 bug ？
9. Reat 调度流程？【遗留问题】
- 1. Reat16 为什么不使用 requestIdleCallback？
- 2. Reat16 使用什么方案替换 requestIdleCallback ？

10. Reat 哪些流程异步渲染？
 **1. ReactDOM.render()** 
- 首次渲染的时候所有阶段都为同步执行；
- 更新操作的时候在render阶段可能是异步执行，在初始化阶段和Commit阶段是同步执行。

 **2. ReactDOM.createRoot()** 
- 以异步的方式执行Reat应用
- 这是React17中的方法，目前不是稳定的方法；

 **3. setState()** 
- 在React钩子函数、合成事件、生命周期函数里面React能控制的范围内是异步Render，会批量合并数据更新；
- 在setTimeout/setInterval、原生DOM事件中表现为同步。【遗留问题】

11. React 哪些流程不可打断？
- Render节点可以打断；
- Commit阶段不能打断；

---

## [React Hooks](https://gitee.com/ymcdhr/e-react/tree/master/HOOKS)

1. React Hooks 常用钩子
- useState() 数据变量
- useEffect() 生命周期/副作用
- useMemo() 计算属性
- useCallback() 缓存函数

2. React Hooks 原理

## [React 性能优化](https://gitee.com/ymcdhr/e-code/tree/master/04-03-react-hooks-cssinjs/4-3-6-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/%E8%AE%B2%E4%B9%89)


## Redux Mobx 状态管理
1. Redux 流程
2. Redux Store 核心 API
3. Redux 原理
4. Redux 异步中间件实现原理
5. Mobx 原理
6. Mobx 与 Redux 的区别？
7. Mobx 几个常用API
8. Mobx 的调试工具




## [React 基础](https://gitee.com/ymcdhr/e-code/tree/master/04-01-react%20fiber/04-01-study-materials/handouts/04-01-01-React%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE)

1. React Router
2. 组件之间的通信
3. context
4. React 生命周期
5. shouldComponentUpdate 的使用细节
- shouldComponentUpdate 比较的时候只要返回true、false就行了；
- 但如果是一个复杂的对象，用==浅比较会不准确，===深比较又会耗时间，那怎么搞？[参考文档](https://zh-hans.reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action)

--- 

## React 的优势到底在哪儿里？
## React 选择 JSX 的理由是什么？
## React JSX 映射虚拟 DOM？