一、基础篇
1.jsx本质：js语法拓展，并充分具备js的能力，通过babel编译为React.createElement(),返回一个React Element对象。
2.jsx映射为dom：
createElement(type, config, children) type：节点类型，config：组件属性，键值对传入，children：对象，记录组件标签之间的嵌套内容，子节点子元素
二次处理key，ref，self，source四个属性，遍历config，提取子元素push进入childArray
发起ReactElement调用，组装对象，然后再返回，此时获得虚拟dom对象
export function createElement(type, config, children) { // 处理参数 return ReactElement( type, key, ref, self, source, ReactCurrentOwner.current, props, ); } const ReactElement = function(type, key, ref, self, source, owner, props) { const element = { // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, // Built-in properties that belong on the element type: type, key: key, ref: ref, props: props, // Record the component responsible for creating this element. _owner: owner, }; return element }
3.组件更新
触发顺序为父组件=》子组件
diff算法比对虚拟dom，生成真实dom。
componentWillMount优劣以及废弃理由：
getDerivedStateFromProps :接受来自父组件的props和state，返回对象，更新而不是覆盖。使用时需要注意
- 在使用此生命周期时，要注意把传入的 prop 值和之前传入的 prop 进行比较。
- 因为这个生命周期是静态方法，同时要保持它是纯函数，不要产生副作用。
derive：起源
getSnapshotBeforeUpdate:render之后，真实dom渲染之前，获得更新前dom和更新前后state，props的信息。需要与 componentDidUpdate() 方法一起使用 。
fiber：拆解任务，异步渲染。可以被打断的异步渲染流程，根据能否被打断：分为render（可以被暂停）和commit（同步执行）两个阶段。
componentsWillxxx生命周期内不要写异步请求，会导致多次调用，constructor() ----> componentWillMount() ----> render() ----> componentDidMount()，render阶段在生命周期内可以多次重复执行 。
4.数据流向
单向数据流
父组件传送过去的是一个携带上下文的函数，
发布订阅模型解决任意组件通信问题（没细看，
context API=》redux
5.Hooks
函数组件更能捕获render内部的状态，这是两类组件最大的不同。
useeffect return （）=》{} 在组件卸载时调用
优势：1.符合react逻辑2.状态逻辑复用3.业务逻辑拆分
hooks运作依赖底层顺序链表 本质上hooks就是链表
二、面试题
1.react事件系统：关键词：顶层处理，事件集合。
为了解决跨浏览器兼容性问题， React 会将浏览器原⽣事件（ Browser Native Event ）封装为合成事件（ SyntheticEvent ）传⼊设置的事件处理 器中。这⾥的合成事件提供了与原⽣事件相同的接⼝，不过它们屏蔽了底层浏 览器的细节差异，保证了⾏为的⼀致性。另外有意思的是， React 并没有直 接将事件附着到⼦元素上，⽽是以单⼀事件监听器的⽅式将所有的事件发送到 顶层进⾏处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附 着在 DOM 上的事件监听器，最终达到优化性能的⽬的
