8 .React 原理 9.真题
2020-04-16 11:11:57 3 举报AI智能生成
react原理 真题
作者其他创作
大纲/内容
第8章 React 原理
8-1 React原理-考点串讲
React原理
1. 大厂用React概率更高
2. React对开发人员要求更高
3. 大厂更偏爱考察原理
2. React对开发人员要求更高
3. 大厂更偏爱考察原理
1. 函数式编程，不可变值
2. vdom和diff
3. JSX 本质
4. 合成事件
5. setState batchUpdate
6. 组件渲染过程
2. vdom和diff
3. JSX 本质
4. 合成事件
5. setState batchUpdate
6. 组件渲染过程
8-2 再次回顾不可变值
函数式编程
1. 一种编程范式，概念比较多
2. 纯函数
3. 不可变值
2. 纯函数
3. 不可变值
回顾SCU和redux代码
8-3 vdom和diff是实现React的核心技术
回顾vdom和diff
1. h函数
2. vnode数据结构
3. patch函数
2. vnode数据结构
3. patch函数
2.
diff
1. 只比较同一层级，不跨级比较
2. tag不相同，则直接删掉重建，不再深度比较
3. tag和key,两者都相同，则认为是相同节点，不再深度比较
2. tag不相同，则直接删掉重建，不再深度比较
3. tag和key,两者都相同，则认为是相同节点，不再深度比较
1. Vue2.x Vue3.0 React 三者实现vdom的细节都不同
2. 核心概念和实现思路，都一样
3. 面试主要考察后者，不用全部掌握细节
2. 核心概念和实现思路，都一样
3. 面试主要考察后者，不用全部掌握细节
8-4 JSX本质是什么
JSX本质
1. JSX等同于Vue模板
2. Vue模板不是html
3. JSX不是JS
2. Vue模板不是html
3. JSX不是JS
1. React.createElement即h函数，返回vnode
2. 第一个参数，可能是组件，也可能是html tag
3. 组件名，首字母必须大写（React规定）
2. 第一个参数，可能是组件，也可能是html tag
3. 组件名，首字母必须大写（React规定）
8-5 说一下React的合成事件机制
合成事件
1. 所有事件挂在到document上
2. event不是原生的，是SyntheticEvent合成事件对象
3. 和Vue事件不同，和DOM事件也不同
2. event不是原生的，是SyntheticEvent合成事件对象
3. 和Vue事件不同，和DOM事件也不同
图示
为何要合成事件机制？
1. 更好的兼容性和跨平台
2. 挂载到document，减少内存消耗，避免频繁解绑
3.方便事件的统一管理（如事务机制）
2. 挂载到document，减少内存消耗，避免频繁解绑
3.方便事件的统一管理（如事务机制）
8-6 说一下React的batchUpdate机制
1. 有时是异步（普通使用），有时是同步（setTimeout、DOM事件）
2. 有时合并（对象形式），有时不合并（函数形式）
3. 后者比较好理解（像Object.assign）,主要讲解前者
2. 有时合并（对象形式），有时不合并（函数形式）
3. 后者比较好理解（像Object.assign）,主要讲解前者
核心要点
1. setState主流程
2. batchUpdate机制
3. transaction(事务)机制
2. batchUpdate机制
3. transaction(事务)机制
setState主流程
isBatchUpdates机制
setState异步还是同步？
1. setState无所谓异步还是同步
2. 看是否能命中batchUpdate机制
3. 判断isBatchUpdates
2. 看是否能命中batchUpdate机制
3. 判断isBatchUpdates
哪些能命中batchUpdate机制
1. 生命周期（和它调用的函数）
2. React中注册的事件（和它调用的函数）
3. React可以'管理'的入口
2. React中注册的事件（和它调用的函数）
3. React可以'管理'的入口
哪些不能命中batchUpdate机制
1. setTimeout setInterval等（和它调用的函数）
2. 自定义的DOM事件（和它调用的函数）
3. React'管不到'的入口
2. 自定义的DOM事件（和它调用的函数）
3. React'管不到'的入口
8-7 简述React事务机制
transaction事务机制
8-8 说一下React组件渲染和更新的过程
组件渲染和更新过程
1. JSX如何渲染为页面
2. setState之后如何更新页面
3. 面试考察全流程
2. setState之后如何更新页面
3. 面试考察全流程
回顾知识点
1. 回顾Vue组件渲染和更新流程
2. 再次回顾JSX本质和vdom
3. 回顾dirtyComponents
2. 再次回顾JSX本质和vdom
3. 回顾dirtyComponents
回顾JSX本质和vdom
1. JSX 即createElement函数
2. 执行生成vnode
3. patch(elem,vnode)和patch(vnode,newVnode)
1. JSX 即createElement函数
2. 执行生成vnode
3. patch(elem,vnode)和patch(vnode,newVnode)
讲解内容
1. 组件渲染和更新过程
2. 更新的两个阶段
3. React fiber
2. 更新的两个阶段
3. React fiber
组件渲染过程
1. props state
2. render() 生成vnode
3. patch(elem,vnode)
1. props state
2. render() 生成vnode
3. patch(elem,vnode)
组件更新过程
1. setState(newState)-->dirtyComponent(可能有子组件)
2. render()生成newVnode
3. patch(vnode，newVnode)
1. setState(newState)-->dirtyComponent(可能有子组件)
2. render()生成newVnode
3. patch(vnode，newVnode)
8-9 React-fiber如何优化性能
更新的两个阶段
1. 上述patch被拆分为两个阶段
2. reconciliation阶段-执行diff算法，纯JS计算
3. commit阶段-将diff结果渲染DOM
2. reconciliation阶段-执行diff算法，纯JS计算
3. commit阶段-将diff结果渲染DOM
可能会有性能问题
1. JS是单线程，且和DOM渲染共用一个线程
2. 当组件足够复杂，组件更新时计算和渲染都压力大
3. 同时再有DOM操作需求（动画、鼠标拖拽等），将卡顿
2. 当组件足够复杂，组件更新时计算和渲染都压力大
3. 同时再有DOM操作需求（动画、鼠标拖拽等），将卡顿
解决方案fiber
1. 将reconciliation阶段进行任务拆分(commit无法拆分)
2. DPM需要渲染时暂停，空闲时恢复
3. window.requestIdleCallback
2. DPM需要渲染时暂停，空闲时恢复
3. window.requestIdleCallback
关于fiber
1. React内部运行机制，开发者体会不到
2. 了解背景和基本概念即可
2. 了解背景和基本概念即可
小结
1. 组件渲染和更新过程
2. 更新的两个阶段 reconciliation commit
3. React fiber
2. 更新的两个阶段 reconciliation commit
3. React fiber
8-10 React原理-考点总结和复习
React原理
1. 函数式编程
2. vdom和diff
3. JSX 本质
4. 合成事件
5. setState batchUpdate
2. vdom和diff
3. JSX 本质
4. 合成事件
5. setState batchUpdate
函数式编程
1. 一种编程范式，概念比较多
2. 纯函数
3. 不可变值
2. 纯函数
3. 不可变值
JSX本质和vdom
1. JSX 即createElement函数
2. 执行生成vnode
3. patch(elem,vnode) patch(vnode,newVnode)
2. 执行生成vnode
3. patch(elem,vnode) patch(vnode,newVnode)
合成事件
1. 所有事件挂在到document上
2. event不是原生的，是SyntheticEvent合成事件对象
3. 和Vue事件不同，和DOM事件也不同
2. event不是原生的，是SyntheticEvent合成事件对象
3. 和Vue事件不同，和DOM事件也不同
setState和batchUpdate
1. setState的表现（重要）和主流程
2. batchUpdate机制
3. transation(事务)机制
2. batchUpdate机制
3. transation(事务)机制
组件渲染和更新
1. 组件渲染和更新过程
2. 更新的两个阶段：reconciliation commit
3. React fiber
2. 更新的两个阶段：reconciliation commit
3. React fiber
第9章 React 面试真题演练
1、组件之间如何通讯
1. 父子组件props
2. 自定义事件
3. Redux和Context
2. 自定义事件
3. Redux和Context
2、JSX本质是什么
1. createElement
2. 执行返回vnode
2. 执行返回vnode
3.、Context是什么？如何应用？
1. 父组件，向其下所有子孙组件传递信息
2. 如一些简单的公共信息：主题色、语言等
3. 复杂的公共信息，请用redux
2. 如一些简单的公共信息：主题色、语言等
3. 复杂的公共信息，请用redux
4、shouldComponentUpdate用途
1. 性能优化
2. 配合‘不可变值’一起使用，否则会出错
2. 配合‘不可变值’一起使用，否则会出错
5、redux单项数据流
6、setState场景题
6、什么是纯函数
1. 返回一个新值，没有副作用（不会‘偷偷’修改其他值）
2. 重点：不可变值
3. 如arr1=arr.slice()
2. 重点：不可变值
3. 如arr1=arr.slice()
7、React组件生命周期
1. 单组件生命周期
2.父子组件生命周期
3. 注意SCU
2.父子组件生命周期
3. 注意SCU
8、React发起ajax应该在哪个生命周期
1. 同Vue
2. componentDidMount
2. componentDidMount
9、渲染列表，为何使用key
1. 同Vue。必须用key,且不能是index和random
2. diff算法中通过tag和key来判断，是否是sameNode
3. 减少渲染次数，提升渲染性能
2. diff算法中通过tag和key来判断，是否是sameNode
3. 减少渲染次数，提升渲染性能
10、函数组件和class组件的区别
1. 纯函数，输入props，输出JSX
2. 没有实例，没有生命周期，没有state
3. 不能扩展其他方法
2. 没有实例，没有生命周期，没有state
3. 不能扩展其他方法
11、什么是受控组件
1. 表单的值受state控制
2. 需要自行监听onChange,更新state
3. 对比非受控组件
2. 需要自行监听onChange,更新state
3. 对比非受控组件
12、何时使用异步组件
1. 同Vue
2. 加载大组件
3. 路由懒加载
2. 加载大组件
3. 路由懒加载
13、多个组件有公共逻辑，如何抽离
1. 高阶组件 HOC
2. Render Props
3. mixin已被React废弃
2. Render Props
3. mixin已被React废弃
14、redux如何进行异步请求
1. 使用异步action
2. 如redux-thunk
2. 如redux-thunk
15. react-router如何配置懒加载
16、PureComponent有何区别
1. 实现了浅比较的shouldComponentUpdate
2. 性能优化
3. 但要结合不可变值使用
2. 性能优化
3. 但要结合不可变值使用
17、React事件和DOM事件的区别
1. 所有事件挂在到document上
2. event不是原生的，是SyntheticEvent
3. dispatchEvent
2. event不是原生的，是SyntheticEvent
3. dispatchEvent
18、React性能优化
1. 渲染列表时加key
2. 自定义事件、DOM事件及时销毁
3. 合理使用异步组件
4. 减少函数bind this的次数
5. 合理使用SCU PureComponent和memo
6. 合理使用Immutable.js
7. webpack层面的优化（后面会讲）
8. 前端通用的性能优化，如图片懒加载
2. 自定义事件、DOM事件及时销毁
3. 合理使用异步组件
4. 减少函数bind this的次数
5. 合理使用SCU PureComponent和memo
6. 合理使用Immutable.js
7. webpack层面的优化（后面会讲）
8. 前端通用的性能优化，如图片懒加载
19、React和Vue的区别
相同点
1. 都支持组件化
2. 都是数据驱动视图
3. 都是用vdom操作DOM
2. 都是数据驱动视图
3. 都是用vdom操作DOM
区别
1. React使用JSX拥抱JS，Vue使用模板拥抱html
2. React函数式编程，Vue声明式编程
3. React更多需要自力更生，Vue把想要的都给你
2. React函数式编程，Vue声明式编程
3. React更多需要自力更生，Vue把想要的都给你
0 条评论
下一页
