第一章 一些前置知识

• babel ：能将jsx转成js
• react development是react的核心
• react-dom：react渲染在不同平台所需要的核心代码
• 只有先引入核心库才能引入扩展库
• 标签type必须写babel
• 标签内不能加单引号

1.1 jsx语法糖：

React的JSX创建出来的是虚拟DOM，而不是HTML

1.定义虚拟DOM时，不要加引号

2.标签中混入js表达式，要用{}

3.样式的类名指定不要用class，要用classname

4.内联样式。要用style={{key:value}}的形式去写，要有两个花括号

5.只能有一个根标签，即剩下的必须嵌套在里面

6.标签必须闭合，不能缺少根元素，甚至用空标签都可以

7.标签首字母大写

8.label要用htmlFor

9.react中的列表循环有且只有map可以使用，因为只有map才有返回值

                                    1）若小写开头 则将该标签转换为html中的同名元素，若无对应的同名元素则报错
​
                                    2）若大写开头 则找react的对应组件  没有定义则报错

1.2 模块与组件化

模块：提供特定功能的js程序 一般就是一个js文件

组件：用来实现局部功能效果的代码和资源的集合

rcc-react class component

rfc-reactt function component

通过使用组件来提高耦合性，更易于维护

定义组件分为3步：

1、导入React核心模块

2、定义组件类

3、导出组件

第二章 类组件ClassComponent

react开发者组件，如果网站未打包上线则是红色

components:记录组件组成 profiler：记录网站性能

2.1 生命周期

组件从被创建到被销毁的过程。

Mounting—出生

• constructor 先执行constructor里面的函数，初始化数据

• render

  初始化数据之后，页面完成初次渲染

• DidMount

渲染完成后进行通知

Updating—长大

• render

数据（new props）的更新引起视图的重新渲染

• DidUpdate

更新渲染完成后，进行通知

Unmounting-寄

• WillUnmount

卸载阶段要做什么

为什么是Will而不是Did？

只有在挂载的时候才能发出通知，相当于只有在活着的时候才能说话

具体过程：

1.初始化阶段

componentWillMount：render修改之前最后一次修改状态的机会，在此阶段做一些状态的初始化，状态的定义，拿不到真实的DOM节点

React16之后已经不推荐使用，需要在前面加上UNSAFE_或直接不用，把该放的放到constructor或DidMount中去

Why?

需要递归比对虚拟DOM树，找出需要变动的节点，然后同步更新他们，会占据浏览器资源，掉帧，用户感觉到卡顿

解决办法：ReactFiber（纤维，协程或纤程）

和线程不同，本身没有并发或并行能力，只是一种控制流程的让出机制，让出CPU的执行权，让CPU去干别的事情，渲染的过程可以被中断，控制权交回浏览器让位高优先级的任务，空闲后再恢复渲染。

根据浏览器每一帧执行的特性，构思出了Fiber来将一次任务拆解成单元，以划分时间片的方式，按照Fiber的自己的调度方法，根据任务单元优先级，分批处理，将一次更新分散在多次时间片中。

适度的让出CPU执行权，除了让浏览器及时响应交互，还有其他好处

• 分批延迟操作DOM
• 让浏览器适度休息，对代码进行编译优化以及热代码优化，或者对reflow进行修正