React整理

来源于前端框架体系思维导图

React使用

JSX基本知识点串讲

jsx基本使用

1. 变量、表达式
2. class style
3. 子元素和组件

JSX如何判断条件和渲染列表

1. 三元表达式
2. 逻辑运算符&& ||

React事件为何bind this

1. bind this

• 修改方法this指句
• this默认是undefined

2. 关于event参数

• event. preventDefault()

阻止默认行为

• event. stopPropagationn()

阻止冒泡

• 不是原生event是SyntheticEvent组合事件

3. 传递自定义参数
4. react17事件绑定到root

React事件和DOM事件的区别

1. React事件和DOM事件的区别在于事件处理方式和绑定方式。React事件处理方式使用驼峰命名的事件名称，而非 DOM 事件的全小写形式，另外在 React 中，事件是绑定在组件元素上的，而不是直接添加到实际的 DOM 元素上。

React表单知识点串讲

1. 受控组件

React父子组件通讯

1.组件使用

• props传递数据
• 传递函数
• 类型检查

props type

setState为何使用不可变值

setState是同步还是异步

1. 异步联想$nextTick
2. setTimeOut中是同步
3. 自定义的DOM事件同步

setState合适会合并state

1. 传入对象，会被合并。执行结果只一次
2. 传入函数，不会被合并。

react组件生命周期

1. 单个组件生命周期

• constructor
• render
• DidMount
• DidUpdate
• WillUnmount

2. 父子生命周期

• 和vue一样

3. componentDidmount中请求数据最好

React基本使用－知识点总结和复习

1. 以下为高级特性

React函数组件和class组件有何区别

1. 函数组件
2. 纯函数，输入props，输出JSX
3. 没有实例，没有生命周期，沒有state
4. 不能扩展其它方法

什么是React非受控组件

1. ref
2. defaultValue、defaultChecked
3. 手动操作DOM元素
4. 非受控组件使用场景

• 必须手动操作DOM元素，setState实现不了
• 文件上传 <input type=file>
• 某些富文本编辑器，需要传入DOM元素

5. 受控组件VS非受控组件

• 优先使用受控组件，符合React设计原则
• 必须操作DOM时，再使用非受控组件

什么场景需要用React Protals（传送门）

1. 组件默认会按照既定层次嵌套渲染
2. 使用场景

• overflow:hidden
• 父组件z-index值太少
• fixed需要放在body第一层级

3. createPortal

是否用过React Context（上下文）

1. 公共信息（语言、主题）如何传递给每个组件
2. 用props太繁琐
3. 用redux小题大做
4. 使用过程

• 创建Context填入默认值（任何一个js变量）
• 生产方通过.Provider赋值一个动态的值
• 消费

React如何异步加载组件

1. 异步组件

• import()
• React.lazy
• React.Suspense

React性能优化－SCU的核心问题在哪

1. 性能优化

• 性能优化，永远是面试的重点，涉及React涉及理念
• 性能优化对于React更加重要
• 回顾讲setState时重点强调的的不可变值
• shouldComponentUpdate（简称SCU）
• PureComponent和React.memo
• 不可变值immutable.js

2. SCU基本用法

• nextProps,nextState对比，不同时返回true可以渲染，false不重复渲染
• 生命周期中此阶段可以根据true\false决定是否重新render

React性能优化－SCU默认返回什么

1. React默认：父组件有更新，子组件则无条件也更新
2. SCU一定每次都要用吗

• 需要的时候才优化

React性能优化－SCU一定要配合不可变值

React性能优化－PureComponent和memo

1. PureComponent,SCU中实现了浅比较
2. 函数组件中使用memo
3. 浅比较已使用大部分情况（尽量不要做深度比较）

React性能优化－了解immutable.js

1. 彻底拥抱“不可变值”
2. 基于共享数据（不是深拷贝），速度快
3. 有一定学习和迁移成本，按需使用

什么是React高阶组件

1. 关于组件公共逻辑的抽离

• mixin，已被Reacr弃用
• 高阶组件 HOC
• Render Props

2. 高阶组件基本用法

• 高阶组件不是一种功能，而是一种模式
• 定义一个更高级的组件包裹传来的子组件，在里面实现公共逻辑，通过属性的方式传到子组件
• APP组件被其他组件包裹

什么是React Render Props

1. APP包裹其他组件
2. 核心思想

• 通过一个函数将class组件的state作为props传递给纯函数组件

React高级特性考点总结

Redux考点串讲

1. 和Vuex作用相同，但比Vuex学习成本高
2. 不可变值，纯函数

描述Redux单项数据流

Redux使用

1. 基本概念

• store state
• action
• reducer

2. 单项数据流

• dispatch(action)
• reducer->newState
• subscribe触发通知

3. react-redux
4. 异步action
5. 中间件

串讲react-redux知识点

1. <Provider>connect
2. connect
3. mapStateToProps mapDispatchToProps

Redux action如何处理异步

1. 在Redux中，可以使用中间件（如redux-thunk或redux-saga）来处理异步action。redux-thunk允许action创建函数返回一个函数而不是一个普通的action对象，从而可以在这个函数中进行异步操作。redux-saga则是通过使用generator函数和saga来处理异步逻辑。

简述Redux中间件原理

简述react-router知识点

1. 路由模式（hash、H5 history）,同vue-router
2. 路由配置(动态路由、懒加载)，同vue-router

React使用－考点总结

1. 基本使用
2. 高级特性
3. Redux和React-router使用

React原理

再次回顾不可变值

vdom和diff是实现React的核心技术

1. vdom
2. h函数
3. vnode数据结构
4. patch函数
5. diff
6. 只比较同一层级，不跨级比较
7. tag不相同，则直接删掉重建，不再深度比较
8. tag和key，两者都相同，则认为是相同节点，不再深度比较

JSX本质是什么

1. 等同于Vue模板
2. Vue模板不是HTML
3. JSX也不是JS
4. JSX既不是字符串，也不是HTML，而是一种类似XML，用于描述用户界面的JS扩展语法
5. 本质
6. React.createElement即h函数，返回vnode
7. 第一个参数，可能是组件，也可能是html tag
8. 组件名，首字母必须大写（React规定）

说一下React的合成事件机制

1. event不是原生的
2. 为何要合成事件机制
3. 更好的兼容性和跨平台
4. 载到document,减少内存消耗，避免频繁解绑
5. 方便事件的统一管理（如事务机制）
6. React17绑定到root组件
7. 有利于多个React版本并存
8. 

说一下React的batchUpdate机制

1. setState主流程
2. setState异步还是同步？
3. setState无所谓异步还是同步
4. 根据是否能命中batchUpdate机制
5. 能命中batchUpdate机制
6. 生命周期
7. React中注册的事件
8. React可以“管理”的入口
9. 哪些不能命中batchUpdate机制
10. setTimeout setInterval等
11. 自定义的DOM事件
12. React“管不到”的入口
13. 判断isBatchingUpdates
14. batchUpdate机制
15. transaction（事务）机制

简述React事务机制

1. transaction事务机制

说一下React组件渲染和更新的过程

1. JSX如何渲染为页面
2. setState之后如何更新页面
3. 组件渲染过程
4. props state
5. render()生成vnode
6. patch(elem,vnode)
7. 组件更新过程
8. setState(newState)–>dirtyComponents
9. render()生成newVnode
10. patch(vnode,newVnode)

React-fiber加何优化性能

1. 更新的两个阶段
2. reconciliation阶段
3. 执行diff算法，纯js计算
4. commit阶段
5. 将diff结果渲染DOM
6. 可能会有性能问题
7. JS是单线程，且和DOM渲染共用一个线程
8. 当组件足够复杂，组件更新时计算和渲染都压力大
9. 同时再有DOM操作需求（动画、鼠标拖拽等）将卡顿
10. 解决方案fiber
11. 将reconciliation阶段进行任务拆分（commit无法拆分）
12. DOM需要渲染时暂停，空闲时恢复
13. window.requestIdleCallback
14. 关于fiber
15. React内部运行机制，开发者体会不到
16. 更多了解背景和基本概念

React原理－考点总结和复习

1. 函数式编程
2. 一种编程范式，概念比较多
3. 纯函数
4. 不可变值
5. vdom和diff
6. jsx本质
7. jsx即createElement函数
8. 执行生成vnode
9. patch(elem,vnode)patch(vnode,newVnode)
10. 合成事件
11. 所有事件挂载到document上
12. event不是原生的，是Synthetic Event合成事件对象
13. 和Vue事件不同，和Dom事件也不同
14. setState batchUpdate
15. setState的表现（重要）和主流程
16. batchUpdate机制
17. transaction（事务）机制
18. 组件渲染过程
19. 组件渲染和更新过程
20. 更新的两个阶段：reconciliation commit
21. React fiber
22. 函数式编程

React真题演练

介绍

组件之间如何通讯

1. 父子组件props
2. 自定义事件
3. Redux和context

ajax应该放在哪个生命周期

组件公共逻辑如何抽离

函数组件和class组件区别

1. 纯函数，输入props,输出JSX
2. 没有实例，没有生命周期，没有state
3. 不能扩展其他方法

什么是受控组件

1. 表单的值，受state控制
2. 需要自行监听onChange，更新state
3. 对比非受控组件

何时使用异步组件

1. 同 Vue
2. 加载大组件
3. 路由懒加载

多个组件有公共逻辑，如何抽离

1. 高阶组件
2. Render Props
3. mixin已被React废弃

redux如何进行异步请求

1. 使用异步action
2. 如redux-thunk

PureComponent有何区别

1. 实现了浅比较的shouldComponentUpdate
2. 优化性能
3. 但要结合不可变值使用

常见性能优化方式

1. 渲染列表时加key
2. 自定义事件、DOM事件及时销毁
3. 合理使用异步组件
4. 减少函数bind this的次数
5. 合理使用SCU PureComponent和memo
6. 合理使用Immutable.js
7. webpack层面的优化
8. 前端通用的性能优化，如图片懒加载
9. 使用SSR

React和Vue区别

1. 都支持组件化
2. 都是数据驱动视图
3. 都使用vdom操作DOM
4. React使用JSX拥抱JS,Vue使用模板拥抱html
5. React函数式编程，Vue声明式编程
6. React更多需要自力更生，Vue把想要的都给你

JSX本质

1. createdElement
2. 执行返回vnode

Context是什么，如何应用

1. 父向子孙组件传递信息
2. 简单的公共信息：主题色、语言
3. 复杂用redux

React hooks

class组件存在哪些问题

1. 大型组件很难拆分和重构，很难测试（即class不易拆分）
2. 相同业务逻辑，分散到各个方法中，逻辑混乱
3. 复用逻辑变的复杂，如Mixins、HOC、Render Prop
4. React组件更易用函数表达
5. React提倡函数式编程，View=fn(props)
6. 函数更灵活，更易拆分，更易测试
7. 但函数组件太简单，需要增强能力——Hooks

用useState实现state和setState功能

1. Hools命名规范
2. 规定所有的Hooks都用use开头
3. 自定义Hook也要use开头
4. 非Hooks的地方，尽量不要使用useXxx写法

useEffect模拟组件生命周期

1. 模拟componentDidMount-依赖[]
2. 模拟componentDidUpdate-无依赖或依赖[a,b]
3. 模拟componentWillUnMount-返回一个函数
4. useEffect让纯函数有了副作用
5. 所谓副作用，就是函数之外 造成影响，如设置全局定时任务
6. 而组件需要副作用，所有需要useEffect“钩”到纯函数中

用useEffect模拟WillUnMount时的注意事项

useRef和useContext

1. 其他Hooks
2. useRef
3. useContext
4. userReducer
5. useMemo
6. useCallback

useReducer代替redux吗

1. useReducer和redux的区别
2. useReducer是useState的代替方案，用于state复杂变化
3. useReducer是单个组件状态管理，组件通讯还需要props
4. redux是全局的状态管理，多组件共享数据

使用useMemo做性能优化

1. React默认会默认更新所有子组件
2. class组件使用SCU和PureComponent做优化
3. Hooks中使用useMemo，但优化的原理是相同的（对props的浅层对比）

使用useCallback做性能优化

1. useMemo缓存数据
2. useCallback缓存函数
3. 两者是React Hooks的常见优化策略

什么是自定义Hook

1. 封装通用的功能
2. 开发和使用第三方Hooks
3. 自定义Hook带来了无限的扩展性，解耦代码
4. 总结
5. 本质是一个函数，以use开头（重要）
6. 内部正常使用useState useEffect获取其他Hooks
7. 自定义返回结果，格式不限

使用Hooks的两条重要规则

1. 强调命名规范useXxx
2. Hooks使用规范，重要
3. 只能用于React函数组件和自定义Hook中，其他地方不可以
4. 只能用于顶层代码，不能在循环、判断中使用Hooks
5. 关于Hooks的调用规范

为何Hooks要依赖调用顺序

1. 无论是render还是re-render，Hooks调用顺序必须一致
2. 如果Hooks出现在循环、判断里，则无法保证顺序一致
3. Hooks严重依赖于调用顺序

class组件逻辑复用有哪些问题

1. mixins的问题

• 变量作用域来源不清
• 属性重名
• mixins引用过多会导致顺序冲突

2. 高阶组件HOC

• 组件层级过多，不易渲染，不易调试
• HOC会劫持props,必须严格规范，容易出现纰漏

3. Render Prop

• 学习成本高，不易理解
• 只能传递纯函数，而默认情况下纯函数功能有限

Hooks组件逻辑复用有哪些好处

Hooks使用中的几个注意事项

Hooks面试题解答

1. 为什么会有React Hooks，它解决了哪些问题
2. React Hooks如何模拟组件生命周期
3. 如何自定义Hook
4. React Hooks性能优化
5. 使用React Hooks遇到哪些坑
6. Hooks相比HOC和Render Prop有哪些优点

---

独立设计

---

组件和状态设计

---

状态设计的思路和要点

---

组件设计的思路和要点

---

组件设计和状态设计的总结

---

状态设计和组件设计的考点总结

---