React是什么？

React的中文含义是反应或者响应。 React的核心原理是：当数据变化时，UI能自动把变化反应出来。

在React出现时的背景来说是颠覆式创新。

举个例子，在当时如果要实现一个聊天应用，当来了一条新消息时，你需要通过DOM API把消息加到聊天框，同时要让显示未读消息的地方让数字加一，这样才能保持UI的一致性。

而如果使用React的话，你只需要在业务状态和UI状态之间建立一个绑定关系就可以了，不需要去直接操作修改UI，而是绑定完成后，React会在业务状态发生变化时，帮助我们去完成UI的变化。

React的基本概念#

基本概念就三个：

组件
状态
JSX

组件#

组件有两种

原生组件 div、span等
自定义组件使用时必须大驼峰命名，如PageHeader

1
function CommentBox() {
2
  return (
3
    <div>
4
      <CommentHeader />
5
      <CommentList />
6
      <CommentForm />
7
    </div>
8
  );
9
}

状态(state和props管理状态)#

根据React的核心机制，需要在状态变化时渲染UI，那就需要有保存状态的地方，在React中叫做state。

props是用来在父子组件之间传递状态的，类似于表单组件的传参属性概念。

用React函数组件举个state例子

1
import React from "react";
2

3
export default function Counter() {
4
  const [count, setCount] = React.useState(0);
5
  return (
6
    <div>
7
      <button onClick={() => setCount(count + 1)}>{count}</button>
8
    </div>
9
  );
10
}

通过useState可以定义一个状态，和一个设置状态的函数。

点击Button ⇒ setCount更新count状态 ⇒ 更新视图渲染(count+1)

再举个state+props的例子

1
import React from "react";
2

3
function CountLabel({ count }) {
4
  // 子组件用于显示颜色
5
  const color = count > 10 ? "red" : "blue";
6
  return <span style={{ color }}>{count}</span>;
7
}
8

9
export default function Counter() {
10
  // 定义了 count 这个 state
11
  const [count, setCount] = React.useState(0);
12

13
  return (
14
    <div>
15
      <button onClick={() => setCount(count + 1)}>
16
        <CountLabel count={count} />
17
      </button>
18
    </div>
19
  );
20
}

点击Button ⇒ setCount更新count状态
count状态发生变化 ⇒ 作为props传入CountLabel
CountLabel重新执行 + 渲染(根据count值对应不同的color颜色)

React和Vue的区别

React函数式：

当props更新时，整个函数组件会重新执行
函数内的所有代码都会重新运行
创建新的变量和JSX元素
完全重新渲染这个组件实例

Vue:

组件实例会被保留
只触发响应式系统的更新
只重新计算依赖于变化的props的计算属性或方法
智能地只更新需要变化的DOM部分

主要区别：

Vue更细粒度，只更新受影响的部分
React采用完全重新执行的方式，更符合函数式编程理念
Vue的响应式系统自动追踪依赖关系
React需要开发者主动考虑性能优化（如使用useMemo、useCallback等）

JSX语法本质#

JSX 的本质是什么，它和 JS 之间到底是什么关系？#

JSX本质是JavaScript的一种语法拓展, 但是它充分具备 JavaScript 的能力。

JSX 语法是如何在 JavaScript 中生效的?#

通过Babel将JSX转换成React.createElement()， React.createElement() 将返回一个叫作“React Element”的 JS 对象.转换就是在编译的过程中, 由Babel完成.

JSX是如何映射成DOM的#

JSX

1
import React from "react";
2

3
function CountLabel({ count }) {
4
  // 子组件用于显示颜色
5
  const color = count > 10 ? "red" : "blue";
6
  return <span style={{ color }}>{count}</span>;
7
}
8

9
export default function Counter() {
10
  // 定义了 count 这个 state
11
  const [count, setCount] = React.useState(0);
12

13
  return (
14
    <div>
15
      <button onClick={() => setCount(count + 1)}>
16
        <CountLabel count={count} />
17
      </button>
18
    </div>
19
  );
20
}

JSX ⇒ JS

1
React.createElement(
2
  "div",
3
  null,
4
  React.createElement(
5
    "button",
6
    { onClick: function onClick() {
7
        return setCount(count + 1);
8
      } },
9
    React.createElement(CountLabel, { count: count })
10
  )
11
);

React.createElement介绍

最后通过ReactDOM.createRoot().render() 方法将这个React元素添加到DOM中。

在 React 18 中，ReactDOM.render()已被弃用，取而代之的是ReactDOM.createRoot().render()：

总结（JSX到真实DOM的流程）#

通过Babel将JSX转换成JS
用React.createElement来创建用来描述DOM元素的React元素
最终会通过ReactDOM.createRoot().render()将React元素添加到真实DOM中。