1.jsx是如何变成dom元素的
jsx是js语言的一种拓展，它和模版语法很接近，但是它充分的具备js的能力。 jsx会被编译为react.createElement(),ReactCreateElement最终返回reactElement的js对象。 babel主要作用是将js代码进行代码转换。
- JXS代码
- babel转换
- react.createElement调用 二次处理key,ref，self source四个属性值 遍历config,筛选可以提进props里的属性 提取子元素，推入childArray数组 格式化defaultProps
- reactElement调用
- 虚拟dom
- ReactDOM.render()渲染
- 真实dom
react 15生命周期
constructor->componentWillMonut->render->componentDidMount
componentWillreceveProps: props发生改变或者父组件的重新渲染会触发这个生命周期
shouldComponentUpdate: 引申出pureComponent的概念
react组件化的设计思想
- 封闭性 渲染工作流程封闭，各个组件的渲染流相互独立
- 开发性：单一数据流的形式，通过props组件之间传递数据
render是react的灵魂，串联整个组件系统的数据流和渲染工作流 生命周期是躯干：串连整个react的行动轨迹
react 16
废弃了componentWillMount,新增了getDerivedStateProps
react引入fiber的原因
- 规范开发者开发习惯，减少在will阶段尽心的读写dom，异步请求等
- 解决在一次setState阶段耗时过程带来的交互的⬆上的卡顿，优化用户体验
- 干掉了部分will阶段的生命周期，
- 更新渲染的生命周期分为render 阶段 和commit 阶段
- render可以被打断，打断时候，维护链表记录子节点和兄弟节点的信息
- 将一次大的更新拆成很多小的任务，及时让出cpu的控制权
基于props的单向数据流
父子组件的通信 class->this.props 函数组件->入参
react Hooks
1.告别难以理解的class 2.解决业务逻辑难以拆分的问题 3.使状态逻辑服用变得简单可行 4.从设计思想上来说更符合react的理念
