文章第一句话为“这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
一、React的历史与应用
（Vue和React的区别是什么？）
一、核心思想不同
Vue的核心思想是尽可能的降低前端开发的门槛，是一个灵活易用的渐进式双向绑定的MVVM框架。
React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构。
- RQ1：声明式是什么意思？
- 指令式：像C语言，手动的告诉程序一步一步需要做什么
- 响应式：自己会响应自己
声明式与之相对应的是命令式，命令式指的是通过DOM操作一步步把网页变成想要的样子，而声明式则是只需要通过状态去形容最后的网页长什么样子即可。
- RQ2：组件化是什么意思？
组件化指的是尽可能的将页面拆分成一个个较小的、可以复用的组件，这样让我们的代码更加方便组织和管理，并且拓展性页更强。
- RQ3：如何理解React的单向数据流？
React的单向数据流指的是数据主要从父节点通过props传递到子节点，如果顶层某个props改变了，React会重新渲染所有的子节点，但是单向数据流并非单向绑定，React想要从一个组件去更新另一个组件的状态，需要进行状态提升，即将状态提升到他们最近的祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。单向数据流的好处是能够保证状态改变的可追溯性，假如，父组件维护了一个状态，子组件如果能够随意更改父组件的状态，那么各组件的状态改变就会变得难以追溯。
二、组件写法上不同
Vue的组件写法是通过template的单文件组件格式。
React的组件写法是JSX+inline style，也就是吧HTML和CSS全部写进JavaScript中。
三、Diff算法不同
原文链接：
二、React的设计思路
2.1 原生JS UI编程的痛点
- 状态更新，UI不会自动更新，需要手动地调用Dom进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“CallBack Hell”
2.2 响应式与转换式
响应式编程
原理：
事件——>执行既定的回调——>状态变更——>UI更新
在前端方面实现的效果：
- 状态更新，UI自动更新
- 前端代码可以组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
2.3 组件化
- 组件时组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
思考
- React是单向数据流，还是双向数据流
- 单项数据流：只能父组件向子组件传递，子组件件只能通过父组件传递的某种函数方法去改变父组件里的一些状态
- 如何解决状态不合理上升的问题
- 状态管理库
- 组件的状态改变后，如何更新DOM
组件代码该怎样书写
- 组件内部拥有私有状态State
- 组件接受外部的Props状态提供复用性
- 根据当前的State/Props返回一个UI
三、React（hooks）的写法与React实现
1. React Hook/Hooks是什么?
(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性
2. 三个常用的Hook
(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()
3. State Hook
(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)
(3). useState()说明:
参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
4. Effect Hook
(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM
(3). 语法和说明:
useEffect(() => {
// 在此可以执行任何带副作用操作
return () => { // 在组件卸载前执行
// 在此做一些收尾工作, 比如清除定时器/取消订阅等
}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
(4). 可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount()
5. Ref Hook
(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样
四、React状态管理库
现象：子组件的状态都会堆积到父组件身上去
- 将状态抽离到UI外部进行统一管理（redux、xstate、mobx、recoil）
