React组件如何通讯
props、redux 、context
JSX本质是什么
React.createElement即h函数，返回vnode
第一个参数，可能是组件，也可能是html tag
组件名，首字母必须大写（React规定）
context是什么，有何用途
使用场景
主题、语言向所有的子组件派发
shouldComponentUpdate(SCU)的用途
优化性能
1、SCU默认返回true，即React默认重新渲染所有子组件
2、必须配合不可变值
3、可先不用SCU，有性能问题时再考虑使用
setState
1 不可变值
不能直接通过this.state.xxx = xxx的方式直接修改state的值，必须使用setState
函数编程，纯函数
2 可能是异步更新
1）在React定义的函数中使用为异步更新
2）在自定义DOM事件、setTimeout中是同步的
3 可能会被合并
1）使用对象会被合并
2）使用函数的方式不会被合并
event事件（合成事件机制）
1）event是SyntheticEvent，模拟DOM事件所有能力
2）event.nativeEvent是原生事件对象
3）所有的事件，都被挂载到document上（16版本）；事件绑定到root上（17版本）
4）和DOM事件不一样，和Vue事件也不一样
使用合成事件机制原因：
更好的兼容性和跨平台
挂载到document，减少内存消耗，避免频繁解绑
方便事件的统一管理（如事务机制）
react事件和DOM事件的区别：
所有事件都挂载到document上（16），root（17）
event不是原生的，是SyntheticEvent合成事件对象
dispatchEvent
组件生命周期
单组件生命周期
父子组件生命周期
挂载阶段：父constructor->父render->子constructor->子render->子componentDidMount ->父componentDidMount
更新阶段：父render->子render->子componentDidUpdate->父componentDidUpdate
销毁阶段：父componentWillUnmount->子componentWillUnmount->子销毁->父销毁
非受控组件
1、ref
2、defaultValue defaultChecked
3、手动操作DOM元素
使用场景：
1、必须手动操作DOM元素，setState实现不了
2、文件上传
3、某些富文本编辑器，需要传入DOM元素
受控组件VS非受控组件
1、优先使用受控组件，符合React设计原则
2、必须操作DOM时，再使用非受控组件
Portals
将组件渲染到父组件外
使用场景
1、overflow:hidden
2、父组件z-index值太小
3、fixed需要放在body第一层级
immutable.js
1、彻底拥抱“不可变值”
2、基于共享数据（不是深拷贝），速度好
3、有一定学习和迁移成本，按需使用
组件公共逻辑抽离
1、mixin，已被React弃用
2、高阶组件HOC
3、Render Props
React的batchUpdate机制
setState主流程
setState无所谓异步还是同步
看是否命中batchUpdate机制
判断isBatchingUpdates
哪些能命中batchUpdate机制
1）生命周期（和它调用的函数）
2）React中注册的事件（和它调用的函数）
3）React可以管理的入口
哪些不能命中batchUpdate机制
1）setTimeout、setInterval等（和它调用的函数）
2）自定义的DOM事件（和它调用的函数）
3）React管不到的入口
react事务机制
transaction事务机制
定义一个开始逻辑，定义一个结束逻辑；先执行开始逻辑，再执行当前函数，再执行结束逻辑，
组件渲染和更新过程
渲染：
1）props、state
2）render()生成vnode
3）patch(elem, vnode)
更新：
1）setState(newState) --> dirtyComponents（可能有子组件）
2）render() 生成newVnode
3）patch(vnode, newVnode)
React-fiber如何优化性能
更新的两个阶段：
1）上述的pach被拆分为两个阶段
2）reconcilication阶段---执行diff算法，纯JS计算
3）commit阶段---将diff结果渲染DOM
可能会有性能问题：
1）JS是单线程，且和DOM渲染公用一个线程
2）当组件足够复杂，组件更新时计算和渲染都压力大
3）同时再有DOM操作需要（动画，鼠标拖拽等），将卡顿
解决方案 fiber：
1）将reconciliation阶段进行任务拆分（commit无法拆分）
2）DOM需要渲染时暂停，空闲时恢复
3）window.requestIdleCallback
渲染列表，为何使用key
同Vue。必须用key，且不能是index和random
diff算法中通过tag和key来判断，是否是sameNode
减少渲染次数，提升渲染渲染性能
函数组件和class组件区别
纯函数，输入props，输出JSX
没有实例，没有生命周期，没有state
不能扩展其他方法
React性能优化
渲染列表时加key
自定义事件、DOM事件及时销毁
合理使用异步组件
减少函数bind this的次数
合理使用SCU PureComponent 和memo
合理使用Immutable.js
React和Vue的区别
都支持组件化
都是数据驱动视图
都使用vdom操作DOM
React使用JSX拥抱JS，Vue使用模板拥抱html
React函数式编程，Vue声明式编程
React更多需要自力更生，Vue把想要的都给你
Redux
基本概念
1、store state
2、action
3、reducer
单项数据流
1、dispatch(action)
2、reducer ->newState
3、subscribe触发通知
react-redux
1、Provider
2、connect
3、mapStateToProps mapDispatchToProps
