这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战 今天来介绍CSS中选择器、样式优先级、元素居中方案等。
这篇我们主要来学习React的设计理念和如何调试源码。
设计理念
我们为什么要了解设计理念？因为懂了设计理念，才能明白为了实现这样的理念需要如何架构。从React官网上看到他的理念
我们认为，React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。
它在 Facebook 和 Instagram 上表现优秀。
由此可见，主要是实现快速响应，那制约快速响应的因素有哪些呢？我想主要是当遇到大数据量计算时页面卡顿和发送网络请求页面需要等待请求返回不能操作的问题，可以概括为
- CPU的瓶颈
- IO的瓶颈
React如何解决这两个问题的呢？
关于第一个问题CPU的瓶颈，主流浏览器刷新频率为60Hz，即每（1000ms / 60Hz）16.6ms浏览器刷新一次，而GUI渲染线程与JS线程是互斥的。所以JS脚本执行和浏览器布局、绘制不能同时执行。在每16.6ms时间内，需要完成如下工作JS脚本执行 ----- 样式布局 ----- 样式绘制，当js执行时间过长或超过16.6ms时浏览器来不及绘制页面造成卡顿。那么如何解决的呢？
在浏览器每一帧的时间中，预留一些时间给JS线程，React利用这部分时间更新组件
（可以看到，预留的初始时间是5ms）当预留的时间不够用时，React将线程控制权交还给浏览器使其有时间渲染UI，
React则等待下一帧时间到来继续被中断的工作。这种将长任务分拆到每一帧中，像蚂蚁搬家一样一次执行一小段任务
的操作，被称为时间切片（time slice）。
所以，解决CPU瓶颈的关键是实现时间切片，而时间切片的关键是：将同步的更新变为可中断的异步更新。
关于第二个问题IO的瓶颈，同样需要将同步的更新变为可中断的异步更新。
如何调试源码
- 去下载React源码，依次执行
yarn // 安装依赖
yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE // 打包构建
// 运行第二条命令时可能会报错，要安装JDK，安装了就好了，
cd build/node_modules/react进入React这个包内部，yarn link建立连接；react-dom也一样，我们就建立了两个本地link- 创建一个react项目，执行命令
yarn link react react-dom，将react与react-dom2个包指向facebook/react下我们刚才生成的包。 - 现在试试在
react/build/node_modules/react-dom/cjs/react-dom.development.js中随意打印些东西。在项目下执行yarn start。现在浏览器控制台已经可以打印出我们输入的东西了。 - 当我们改了react源码后，都要执行第一步的第二个命令，重新打包，重新在项目中运行
yarn start
参考资料：
