【笔记-react】《imooc-React源码深度解析 高级前端工程师必备技能》
第01章 课程导学
01-01 课程导学
一、UI=fn(x)
核心api：setState
没有directive双向绑定
二、vue，angular更新大版本，需要调整兼容
三、react，引入fiber，从根本上解决了，js单线程运行，如果计算量太大，导致动画卡帧，交互卡顿问题
四、第1章：React API，及每个API的作用
createElement、createContext、JSX=>JS、ConcurrentMode、Ref、Component、Suspense、Hooks
五、第2章：React中的更新创建
ReactDOM.render、Fiber、UpdateQueue、FiberRoot、Update、expirationTime
六、第3章：react创建完，更新之后的调度过程
scheduleWork、batchedUpdates、performWork、performUnitOfWork、requestWork、react scheduler、renderRoot
七、第4章：开始更新
beginWork以及优化、各类组件的更新过程、调和子节点的过程
八、第5章：完成各个节点的更新
completeUnitOfWork、completeWork、unwindWork、虚拟DOM对比、错误捕获处理、完成整棵树更新
九、第6章：提交更新
commitRoot整体流程、提交快照、提交DOM更新、提交所有声明周期、开发时的帮助方法、提交DOM插入、提交DOM删除
十、第7章：各种功能的实现过程
context的实现过程、ref的实现过程、hydrate的实现过程、React的事件体系
十一、第8章：Suspense
优先更新级的概念、Suspense组件更新、retry重新尝试渲染、更新挂起的概念、timeout处理、lazy组件更新
十二、第9章：Hooks
核心原理、useState、useEffect、useContext、其他Hooks API
十三、Fiber、Update、Scheduler等核心着重讲解
十四、课程电子书链接：https://react.jokcy.me/book/api/react.html
十五、通读源码
外在：提高开发能力、解决问题的能力、提升自身价值
内在：提升学习能力、提升思考能力、提升设计能力
第02章 基础知识React api 一览
02-01 准备工作
一、目录结构
1、packages/
（1）event/
react 事件系统, onClick，自己实现了一套事件传播系统，区别于原生的事件绑定
（2）react/
react包全都在这里
（3）react-dom/
npm安装时，react-dom的源文件包
react-dom会重度依赖react-reconciler
（4）react-reconciler
独立的公共源码
二、react、react-dom之间的关系
1、jsx是与react相关的
2、react本身是一种定义，表现行为的包
3、如何渲染，如何更新都是在react-dom中
三、Flow Type
1、flow，静态检查工具，强制性没有typescript那么高
import type { ReactNodeList } from 'shared/ReactTypes'
2、对代码阅读不会产生太大影响。
3、官网文档：https://flow.org
02-02 JSX到JavaScript的转换
一、babel转换地址（代码转换的测试）：https://babeljs.io/repl
02-03 react-element
一、ReactElement.js
export function createElement( type, config, children) { }
二、react提供的原生组件：Fragment、StrictMode、Suspense
三、config
写在jsx标签上所有的attrs，筛选出props，特殊的key, ref
是否是内建的props
02-07 context
一、组件与组件之间的共同，父子组件沟通，用props
二、context两种方式
childContextType，将在react 17版本中废弃
createContext
三、childContextType
每次更新，都需要进行完整的渲染，对性能消耗非常大
02-08 ConcurrentMode
一、让react的整体渲染过程，能进行一个优先级的排序，并且让整体的渲染过程能中断。这样就可以进行一个任务的调度，提高cpu性能。
如果react更新占用js进程，动画，或input响应就会比较卡。
二、flushSync， import { flushSync } from ‘react-dom’
在更新操作的时候，使用优先级最高的方式去进行更新。
三、如果用了ConcurrentMode，它的子组件产生的更新都是低优先级更新。
02-09 Suspense and lazy
一、Suspense下渲染一个或多个组件，子组件throw promise之前，都会用fallback里的内容
二、16.6只支持lazy，就是异步加载组件，没有支持异步数据加载。
三、在Suspense内部，要等到所有组件都resolve之后，才会把fallback去掉，然后显示里面的内容。有任何一个处于Pending状态的，都会显示fallback
02-10 Hooks
一、hooks的react, react-dom要在16.7版本以上
二、function Component，没有this对象，不能使用生命周期方法
三、React Conf视频：https://reactjs.bootcss.com/blog/2018/11/13/react-conf-recap.html
（讲解了为什么要用hooks）
四、hooks里没有着重区分mounted和updated
五、useEffect，解除绑定用return
useEffect(() => {
console.log('component update')
return () => {
console.log('component unbind')
}
}, [])
02-11 children
一、React.children
二、实际跟数组的map， forEach有点差别
Children: {
map,
forEach,
count,
toArray,
only,
}
map有返回，返回新的数组；forEach无返回，还是原来的数组。
三、
import React from 'react'
function ChildrenDemo (props) {
console.log(props.children)
// [child1, 1, 1, 2, 2, 2]
console.log(React.children.map(props.children, c=> [c, [c, [c]]])) // map方法，变成一维数组
return props.children
}
export default () => {
1
1
}
四、添加对象，删除对象，可能会引起内存抖动问题
五、关于key相关的东西，children打印出来，会有key，怎么实现的
getComponentKey
02-12 others
一、memo
16.6推出的api，给function component，有PureComponent类似的功能（提供了class component 组件类型）
forwardRef
context差不多的东西
二、Fragment
<>， 同
三、StrictMode
标记着这个节点上的所有子元素，会给一些过时的api的提醒
四、cloneElement
创建一个新的reactElement
五、createFactory
对于jsx，基本不可能用到
是对createElement的封装，是createElement绑定了一个type