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

一、本堂课重点内容：

本堂课的知识要点有哪些？

React的历史与应用
React的设计思路
Hooks
React的实现
React状态管理库

二、详细知识点介绍：

React的历史与应用

React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库

2010年 Jordan Walke创造了FaxJS，也就是后来的 React 原型。

2011年 Facebook在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。

2012年在Facebook收购Instagram 后,该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造React。

2013年 React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架。

2014年-今天生态大爆发，各种围绕 React 的新工具/新框架开始涌现。

React应用

前端应用开发
移动原生应用开发
综合Election，进行桌面应用开发

React的设计思路

JS痛点

1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）

2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排

3.原生JavaScript没有组件化（模块化）编码方案，代码复用率低

UI编程痛点

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

React的特点

采用组件化模式，声明式编码，提高开发效率和组件复用性
在React Native中可以用react预发进行安卓、ios移动端开发
使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能

响应式编程

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

组件化

1.组件声明了状态和UI的映射。

2.组件有Props/State两种状态。

3.“组件”可由其他组件拼装而成。

注意：React是单向数据流，只能父组件传给子组件

Hooks

为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能
可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

useState

普通更新 / 函数式更新 state

useState使用场景：当你想要在函数组件中，使用组件状态时，就要使用 useState Hook 了
useState作用：为函数组件提供状态（state）
useState语法：const [变量，设置变量的函数] = useState(初始值)

import { useState } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>click</button>
  )
}

此方法会返回两个值：当期状态和更新状态的函数。效果同 this.state 与 this.setState，区别是 useState 传入的值并不一定要对象，并且在更新的时候不会把当前的 state 与旧的 state 合并

useEffect

使用场景：当你想要在函数组件中，处理副作用（side effect）时就要使用 useEffect Hook 了
useEffect作用：处理函数组件中的一些副作用（side effect）

语法

参数：回调函数（称为 effect），就是在该函数中写副作用代码
执行时机：该 effect 会在组件第一次渲染以及每次组件更新后执行
相当于 componentDidMount + componentDidUpdate

import { useState, useEffect } from 'react';

let timer = null;

const Component = () => {
  const [count, setCount] = useState(0);
  
  // 类似于 class 组件的 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    document.title = `You clicked ${count} times`;
    
    timer = setInterval(() => {
      // events ...
    }, 1000)
    
    return () => {
      // 类似 componentWillUnmount
      // unmount events ...
      clearInterval(timer); // 组件卸载、useEffect 更新 移除计时器
    };
  }, [count]);
  
  // ...
}

如果 useEffect 第二个参数数组内的值发生了变化，那么useEffect第一个参数的回调将会被再执行一遍，这里要注意的useEffect 的返回值函数并不只是再组件卸载的时候执行，而是在这个 useEffect 被更新的时候也会调用，例如上述 count 发生变化后，useEffect 返回的方法也会被执行

useEffect传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。有“副作用"的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

useEffet 可以理解为它替换了componentDidMount, componentDidUpdate, componentWillUnmount 这三个生命周期，但是它的功能还更强大。

有三种写法：

当数组为空 [ ]，表示不会因为页面的状态改变而执行回调方法【即仅在初始化时执行，componentDidMount】，

当这个参数不传递，表示页面的任何状态一旦变更都会执行回调方法

当数组非空，数组里的值一旦有变化，就会执行回调方法

Hooks是可以挂到React生命周期上去执行的一个函数(上文举例的useState, useEffect都是hook, 比如说useState时挂载到了onUpdate上，useEffect是挂载到了onMount上) (其它的hook基本上都是useState和useEffect的封装)

Hook的使用法则：不要在循环，条件或嵌套函数中调用Hook

React的实现

问题

JSX不符合JS标准语法
返回的JSX发生改变时，需要更新DOM
State/Props更新时，需要重新触发render函数

Virtual DOM

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。它赋予了React声明式的API: 您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

How to Diff

不同类型的元素→替换
同类型的DOM元素→更新
同类型的组件元素→递归

React状态管理库

1、redux

项目中所有的state都以一个对象树的形式存储在一个单一的store中。唯一改变state的办法是触发action，一个描述发生什么的对象。为了描述action如何改变state树，则需要编写reducers。

主要的区别：组件之间的通讯问题

不使用 Redux (图左边) ：

只能使用父子组件通讯、状态提升等 React 自带机制
处理远房亲戚(非父子)关系的组件通讯时乏力
组件之间的数据流混乱，出现 Bug 时难定位

使用 Redux (图右边)：

集中式存储和管理应用的状态
处理组件通讯问题时，无视组件之间的层级关系
简化大型复杂应用中组件之间的通讯问题
数据流清晰，易于定位 Bug

Redux 代码被分为三个核心概念：action/reducer/store

action（动作）：描述要做的事情

reducer（函数）：更新状态

store（仓库）：整合 action 和 reducer

2、对比redux，mobx，recoil

redux是集中式管理state，而recoil和mobx是分散式的
recoil目前只适用于hooks函数
recoil时facebook开发的，可以使用react内部的调度机制，这是redux和mobx不支持的

三、引用参考：

‌‌‌‬⁢响应式编程与 React.pptx

学习React | 青训营笔记