React 的颠覆式创新

虚拟DOM机制

核心原理

当数据发生变化时，UI 能够自动把变化反映出来。

我们使用React需要的就是在业务状态和 UI 状态之间建立一个绑定的关系。

过去的开发 UI 的方式仍然是使用基于浏览器 DOM 的 API，React 会自动用最优的方式将虚拟 DOM 更新到真实的 DOM 节点。我们就不用去很颗粒化的去小心翼翼的操作浏览器API去操作真实DOM。

官网的概念

JSX 语法的使用

用声明式的方式来描述数据和 UI 之间的关系，React 用类似 HTML 标记的方式去实现组件化，数据变化以后，UI 也会自动变化。

解决问题

模板语言不够灵活（jsx诞生），DOM API 又太繁琐，且难以维护（React虚拟DOM诞生）。

痛点

业务逻辑的重用

由于类组件是按照生命周期来“办事”，也就是什么时候办什么事，很机械化，循规蹈矩。 这样我们在类组件的不同生命周期中做事件监听的绑定和解绑就必须写得很分散（绑定和解绑在不同的生命周期函数中）。

引入 Hooks

为了解决上面的问题，引入了Hooks。将函数组件得到的新生，可以拥有状态管理（过去函数组件是无状态组件），和“生命周期”。

useEffect这个钩子就是实现副作用的，可以让我们按照业务逻辑去写代码，而不是去按照类组件那种“到点办事”的“老套”。

React 的基本概念

使用组件的方式描述 UI

组件的分类

在 React 中，所有的 UI 都是通过组件去描述和组织的。可以认为，React 中所有的元素都 是组件

1. 内置组件。内置组件其实就是映射到 HTML 节点的组件，例如 div、input、table 等 等，作为一种约定，它们都是小写字母。
   
2. 自定义组件。自定义组件其实就是自己创建的组件，使用时必须以大写字母开头，例如App。
   
3. React 组件是以树状结构组织到一起的，一个 React 的应用通 常只有一个根组件。

使用 state 和 props 管理状态

state：保存状态的机制就是 。props 类似于 Html 标记上属性的概念，用于在父子组件之间传递状态。

上面的state，props变化之后，React都会自动更新state，props所在的UI。

类组件中是使用this.state,this.props。 函数组件就是使用useState，和函数参数接收props。

理解 JSX 语法的本质

实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。

官网传送门

React.createElement函数

第一个参数表示组件的类型；

第二个参数是传给组件的属性，也就是props；

第三个以及后续所有的参数则是子组件。

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
复制代码

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)
复制代码

CRA脚手架

官网传送门

npx create-react-app my-app
cd my-app
npm start