这是我参与「第五届青训营」伴学笔记创作活动的第6天。

初识React

前置知识

1. HTML、JS、CSS基础。
2. 基础的数据结构/算法知识，如二叉树，深度遍历等。
3. 会使用浏览器提供的DOM API来修改DOM，更新UI。

React的应用场景

• 前端应用开发，如Facebook、Instagram、Netflix网页版。
• 移动原生应用开发，如Instagram、Discord的APP。
• 结合Electron，进行桌面应用开发，如QQ NT、VS Code等。

React的设计思路

UI编程痛点

1. 状态更新，UI不会自动更新，需要手动调用DOM进行更新。
2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。

与其对比，React是响应式编程

一个响应式系统是怎样的？

事件 --> 执行既定的回调 --> 状态变更

相比之下，React能解决痛点

1. 状态更新，UI自动更新。
2. 前端代码组件化，可复用，可封装。
3. 状态之间的互相依赖关系，只需声明即可。

组件化

1. 组件是组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部

组件设计

1. 组件声明了状态和UI的映射。
2. 组件有Props/State两种状态。
3. “组件”可由其他组件拼装而成。

生命周期

Hooks的入门

useState

传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

useEffect

传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。

有"副作用"的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM、localStorage存储数据等。

JSX

JSX是一种语法扩展，可以在JavaScript中写出类似HTML的代码，它可以生成React“元素”，用来描述UI应该是什么样子的。同时，它有JavaScript的全部功能，可以使用表达式，属性，子元素等。

虚拟DOM

React中的虚拟DOM是一种用对象来表示真实DOM的技术，它可以提高渲染的效率，避免不必要的DOM操作。React在内存中维护一个虚拟DOM树，当组件发生变化时，会生成一个新的虚拟DOM树，然后用diff算法比较新旧虚拟DOM树的差异，最后只更新真实DOM中变化的部分。