这是我参与[第五届青训营]笔记创作活动的第十五天

本课堂重点内容：

jsx 认识
Component 起源

详细知识点介绍：

Babel 解析 JSX 流程：

JSX 语法的实现需要依赖于两个插件：

@babel/plugin-syntax-jsx：这个插件能让 Babel 有效解析 JSX 语法
@babel/plugin-transform-react-jsx：这个插件在内部调用了@babel/plugin-syntax-jsx，能将 React JSX 转化为 JS 能够识别的 createElement 格式

老版本 React 中，写 jsx 文件默认引入 React 的原因：

jsx 在被 babel 编译之后，会变成 React.createElement 形式，故需要引入 React ，以防找不到 React 而引起报错

React.createElement 和 React.cloneElement 的区别：

前者用来创建 element，后者用来修改 element 并返回一个新的 element 对象

何为 React 组件：

组件本质上就是类和函数，但与常规的类和函数不同的是，组件承载了渲染视图的 UI 和更新视图的 setState等方法。React 在底层的逻辑上会像正常实例化类和正常执行函数那样处理组件。

React 对组件的处理流程：

类组件的执行，在 react-reconciler/src/ReactFiberClassComponent.js 中

function constructClassInstance( 
    workInProgress, // 当前正在工作的 fiber 对象 
    ctor,  // 我们的类组件 
    props  // props 
){ 
    /* 实例化组件，得到组件实例 instance */ 
    const instance = new ctor(props, context) 
}

函数组件的执行，在 react-reconciler/src/ReactFiberHooks.js 中

function renderWithHooks(
  current,          // 当前函数组件对应的 `fiber`， 初始化
  workInProgress,   // 当前正在工作的 fiber 对象
  Component,        // 我们函数组件
  props,            // 函数组件第一个参数 props
  secondArg,        // 函数组件其他参数
  nextRenderExpirationTime, //下次渲染过期时间
){
     /* 执行我们的函数组件，得到 return 返回的 React.element对象 */
     let children = Component(props, secondArg);
}

在 React 调和渲染 fiber 节点时，如果 fiber tag 是 ClassComponent = 1，就按照类组件逻辑处理
如果 FunctionComponent = 0，则按照函数组件逻辑处理

函数组件与类组件的本质区别：

类组件，底层只需要实例化一次，组件的 state 等状态就会保存在实例中。每次更新只需要调用 render 方法以及对应的生命周期即可。
函数组件，每次更新都是一次新的函数执行，一次函数组件的更新，里面的变量会重新声明

个人课后总结：

React 中，Jsx 和 Component 的一些理解和认知

响应式系统与 React(2) | 青训营笔记