2023版react知识记录（更新ing）

1. 什么是JSX？

JSX是 JavaScript 的扩展标记语言，它允许在 JavaScript 中嵌入 HTML 代码。JSX可以让你在 JavaScript 代码中编写类似于 HTML 的代码，从而使你的代码更加简洁和易读。

例如，在React库中，你可以使用JSX编写组件的HTML结构。

<h1 className="title" style={{ color: "red" }}>
  hello
</h1>

经过babel编译后，会变成

React.createElement(
  "h1",
  { className: "title", style: { color: "red" } },
  "hello"
);

createElement执行后，会变成

{
  type: "h1",
  props: {
    className: "title",
    style: {
      color: "red",
    },
  },
  children: "hello",
}

2. react18 的 7 个新特性

1. RenderApi
2. setState 批处理
3. flushSync
4. 卸载组件时的更新状态警告
5. React 组件的返回值
6. Strict Mode
7. Suspense 不需要 Fallback 来捕获

3. 起源-Component (2024年6月27日更新)

在 React 世界里，一切皆组件，组件可以分为两类，一类是类组件（Class），一类是函数组件（Function）

3.1 什么是 React 组件

组件本质上就是函数和类，但是与常规的类和函数不同的是，组件承载了渲染视图的 UI 和更新视图的 setState、useState 等方法

React 对组件的处理流程

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

function constructClassInstance(
  workInProgress, // 当前正在工作的fiber对象
  ctor, // 我们的类组件
  props, // 类组件的props
  renderExpirationTime
) {
  // 实例化组件，得到组件实例
  const instance = new ctor(props, context);
  // 省略部分代码
  return instance;
}

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

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

在 React 调和渲染 fiber 节点的时候，如果发现 fiber tag 是 ClassComponent = 1，则按照类组件逻辑处理，如果是 FunctionComponent = 0 则按照函数组件逻辑处理。当然 React 也提供了一些内置的组件，比如说 Suspense 、Profiler 等。

3.2 二种不同 React 组件

class 类组件

在 class 组件中，除了继承 React.Component ，底层还加入了 updater 对象，组件中调用的 setState 和 forceUpdate 本质上是调用了 updater 对象上的 enqueueSetState 和 enqueueForceUpdate 方法。

React 底层是如何定义类组件的呢？

function Component(props, context, updater) {
  this.props = props; //绑定props
  this.context = context; //绑定context
  this.refs = emptyObject; //绑定ref
  this.updater = updater || ReactNoopUpdateQueue; //上面所属的updater 对象
}
/* 绑定setState 方法 */
Component.prototype.setState = function (partialState, callback) {
  this.updater.enqueueSetState(this, partialState, callback, "setState");
};
/* 绑定forceupdate 方法 */
Component.prototype.forceUpdate = function (callback) {
  this.updater.enqueueForceUpdate(this, callback, "forceUpdate");
};

如上可以看出 Component 底层 React 的处理逻辑是，类组件执行构造函数过程中会在实例上绑定 props 和 context ，初始化置空 refs 属性，原型链上绑定setState、forceUpdate 方法。对于 updater，React 在实例化类组件之后会单独绑定 update 对象。

为了更好地使用 React 类组件，我们首先看一下类组件各个部分的功能：

class Index extends React.Component{
    constructor(...arg){
       super(...arg)                        /* 执行 react 底层 Component 函数 */
    }
    state = {}                              /* state */
    static number = 1                       /* 内置静态属性 */
    handleClick= () => console.log(111)     /* 方法： 箭头函数方法直接绑定在this实例上 */
    componentDidMount(){                    /* 生命周期 */
        console.log(Index.number,Index.number1) // 打印 1 , 2 
    }
    render(){                               /* 渲染函数 */
        return <div style={{ marginTop:'50px' }} onClick={ this.handerClick }  >hello,React!</div>
    }
}
Index.number1 = 2                           /* 外置静态属性 */
Index.prototype.handleClick = ()=> console.log(222) /* 方法: 绑定在 Index 原型链的 方法*/

函数组件

React16.8 hooks问世之后，对函数组件的功能加以强化，函数组件甚至完全取缔类组件。

下面是一个常规的函数组件：

function Index(){
    console.log(Index.number) // 打印 1 
    const [ message , setMessage  ] = useState('hello,world') /* hooks  */
    return <div onClick={() => setMessage('let us learn React!')  } > { message } </div> /* 返回值 作为渲染ui */
 }
 Index.number = 1 /* 绑定静态属性 */

注意：不要尝试给函数组件 prototype 绑定属性或方法，即使绑定了也没有任何作用，因为通过上面源码中 React 对函数组件的调用，是采用直接执行函数的方式，而不是通过new的方式。

函数组件和类组件本质的区别是什么呢？

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

为了能让函数组件可以保存一些状态，执行一些副作用钩子，React Hooks 应运而生，它可以帮助记录 React 中组件的状态，处理一些额外的副作用。

3.3 组件的通信方式

React 一共有5种主流的通信方式：

1. props 和 callback 方式
2. ref方式
3. React-redux 或 React-mobx 状态管理方式
4. context上下文
5. eventBus事件总线

主要讲一下第一种和5种

1. props 和 callback 方式

未完待续。。。