React｜入门之我终于开始学 React 了！

最开始接触前端框架的时候，我选择了上手更快的 Vue；到目前为止基于 Vue 开发了几个项目，对于 Vue 原理也有了一定的了解，可以说是“熟练使用”了～🌝 最近项目不太忙，我终于...决定开始学 React 了！！！（搓手、激动、👋🏼）

⤴️ 入门路线：官网入门教程 + 选一本评价还行的 React 书籍 📚

概览一下 React 特点：【虚拟 DOM、状态、单向数据流、组件】

先启动一个 React 项目试试：

启动有问题：check： create-react-app.dev/docs/gettin…

兼容问题 node 版本切换：

JSX 是 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以它既具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。

比如：

在 React 中，JSX 可以生成 React “元素”。【后面会解释什么是 React 元素】

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。React 通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

【不同于 VUE 将 JS 和 HTML 分离开来的方式】

建议：如果 JSX 有多行的话，用括号括起来。

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用，创建对应的 DOM 对象：

这些对象被称为 “React 元素”。——【JS对象】

注意：JSX 中写原生 DOM 属性的时候，class 要写成 className，事件名要写成驼峰形式（onclick -> onClick）。

要将一个 React 元素渲染到 DOM 节点中，只需把它们一起传入 ReactDOM.render()。如果 UI 要更新，那就需要重新调用 ReactDOM.render()。重新渲染时，React 只会更新变化的部分 —— 虚拟DOM & diff。

React 中编写组件有 2 种方式：函数 和 class（类组件）。组件首字母必须大写。

函数组件：【如果组件只有一个 render 方法，没有 state 这些，写成函数组件比较简洁】

class组件(等价写法)：

在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头，否则，this.props 在构造函数中可能会出现未定义的 bug。

类组件需满足两个条件：

传递给子组件之后，子组件得到了一个 props 对象。

props 是父组件向子组件传递值的形式！它具有只读性：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。【也就是说我们不能在子组件中直接更改 props 哦！】

React 提供了 PropTypes 对象用于校验 props 的类型。

组件样式： 外部 CSS 和 内联样式

⚠️只有类组件才具有生命周期方法，函数组件是没有的哦～

生命周期具体包括：

在组件中可以设置 state 存放组件自己的数据：【是组件私有的数据！】

不要直接修改 state，而是使用 setState()，React 会【合并】我们设置的 state。每次在组件中调用 setState 时，React 都会自动更新其子组件。

数据流是单向的～只能由父组件流向子组件。

【不可变性】：一般来说，有两种改变数据的方式。第一种方式是直接修改变量的值，第二种方式是使用新的一份数据替换旧数据。React 推荐使用第二种方式，为什么呢？

不可变性使得复杂的特性更容易实现。比如 —— 撤销和恢复功能 在开发中是一个很常见的需求，不直接在数据上修改可以让我们追溯并复用历史记录。

如果直接修改数据，那么就很难跟踪到数据的改变。跟踪数据的改变需要可变对象可以与改变之前的版本进行对比，这样整个对象树都需要被遍历一次。

跟踪不可变数据的变化相对来说就容易多了。如果发现对象变成了一个新对象，那么我们就可以说对象发生改变了。

不可变性最主要的优势在于它可以帮助我们在 React 中创建 pure components。我们可以很轻松的确定不可变数据是否发生了改变，从而确定何时对组件进行重新渲染。

React 的事件命名是采用驼峰式，写法是这样的：

处理事件的响应函数要以对象的形式赋值给事件属性，而不是字符串形式。因为 React 中的事件是合成事件，不是原生 DOM 事件。

在 React 中，有一个命名规范，通常会将代表事件的监听 prop 命名为 on[Event]，将处理事件的监听方法命名为 handle[Event] 这样的格式。

值得注意的是 React 事件处理中的 this 指向问题：

（1）箭头函数

这种写法，每次 render 调用时都会重新创建一个新的事件处理函数。

（2）组件方法

这种写法， render 调用时不会重新创建一个新的事件处理函数，但需要在构造函数中手动绑定 this。

还有一种选择是，我们可以在为元素事件属性赋值的同时绑定 this：

（3）属性初始化语法（ES7）

使用官方脚手架 Create React App 创建的项目默认是支持这个特性的，可以在项目中引入 babel 的 transform-class-properties 插件获取这个特性支持。

条件渲染：

列表：

建议给每个动态列表元素加一个 key ：【和 Vue 类似】，不然控制台会报错

表单：如果一个表单元素的值是由 React 管理的，那称它为一个受控组件。

1）文本框 —— 类型为 text 的 input 元素和 textarea 元素，它们受控的主要原理是，通过表单元素的 value 属性设置表单元素的值，通过表单元素的 onChange 事件监听值的变化，并将变化同步到 React 组件的 state 中。

2）select 元素 —— 通过在 select 上定义 value 属性来决定哪一个 option 元素处于选中状态。

3）复选框和单选框 —— type 为 checkbox 和 radio 的 input 元素，React 控制的是 checked 属性。

使用受控组件处理表单状态是比较繁琐的，一种可替代方案时使用非受控组件 —— 表单自己管理状态，React 通过 ref 获取表单的值。这样简化了操作，但是破坏了 React 对组件状态管理的一致性，所以还是少用为好，这里就略过了。

8、状态提升

所谓状态提升，就是将多个子组件需要共同维护的数据提升到父组件中去。

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

React 推荐使用【组合】方式实现代码复用。Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。

注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

React 最棒的部分之一是引导我们思考如何构建一个应用。

举个例子，假设我们已经拿到了一个设计稿和返回数据的 API：

第一步：将设计好的 UI 划分为组件层级

在设计稿上用方框圈出每一个组件，包括它们的子组件，并以合适的名字命名。组件划分原则——单一功能原则：一个组件只负责一个功能。

第二步：用 React 创建一个静态版本

确定了组件层级，可以编写对应的应用了。最好将渲染 UI 和 添加交互这两个过程分开。

先用已有的数据模型渲染一个不包含交互的静态 UI。

第三步：确定 UI state 的【最小且完整】表示

找出应用所需的 state 的最小集合，不要重复或者冗余。【就是说在实现功能的前提下，设置的变量个数尽可能最小】

比如刚刚的示例应用拥有如下数据：

怎么去 check state 的最小表示呢？问自己三个问题：

经过检查，刚刚例子中属于 state 的有：

第四步：确定 state 放置的位置 —— 哪个组件应该拥有某个 state

React 中的数据流是单向的，并顺着组件层级从上往下传递。

对于应用中的每一个 state：

第五步：添加反向数据流

子组件向父组件传值。

【官网这个小例子蛮好的，不管是用什么框架，在开发之前先想清楚要怎么划分组件、怎么设置变量，想好再开始写代码或许事半功倍。】

🤡 React 16 之前， render 方法必须返回单个元素，现在支持返回 数组【由 React 元素组成】和 字符串。

🤡 React 16 之前，组件如果在运行时出错，会阻塞整个应用的渲染，现在有了新的错误处理机制：默认情况下，当组件中抛出错误时，这个组件会从组件树中卸载，从而避免整个应用的崩溃。React 16 还提供了一种更加友好的错误处理方式——错误边界（Error Boundaries），是能够捕获子组件的错误并对其做优雅处理的组件。优雅的处理可以是输出错误日志、显示出错提示等，显然这比直接卸载组件要更加友好。

定义了 componentDidCatch(error, info) 这个方法的组件将成为一个错误边界：

使用 ErrorBoundary ：

内部组件有异常时，错误会被 ErrorBoundary 捕获，并在界面上显示提示。

🤡 Portals 特性：可以让我们把组件渲染到当前组件树以外的 DOM 节点上。【和 Vue 的 teleport 作用类似】

比如创建一个 Modal 组件：

这样不论在哪里调用该组件，它都是 body 的最后一个子元素。

🤡 React Hooks：使用类组件时，有大量的业务逻辑如各类的接口请求需要放在 componentDidMount 和 componentDidUpdate 等生命周期函数中，会使组件变得特别复杂并且难以维护，并且 Class 中的 this 问题也需要特别注意；函数组件虽然能避免 this 问题，但没有生命周期等。

Hooks 出现之后，可以在函数式组件中去使用 React 的各种特性。

Hooks 本质是一些特殊的函数，常见的有：

🎣 useState：使用 state

这里 useState 方法同类组件的方法一样，是异步的。但它没有合并多个 state 的作用。

🎣 useRef：使用 ref

🎣 useEffect：处理副作用，诸如网络请求、DOM 操作之类的；相当于 componentDidMount 和 componentDidUpdate 等的集合体。

举个例子：

可以看到，useEffect 接收两个参数，第一个是个函数，第二个是个数组，其中第一个函数返回一个函数，第二个数组表示依赖参数。当依赖参数发生变化时，就会执行回调函数。整个组件的生命周期过程：组件挂载 → 执行副作用（回调函数）→ 组件更新 → 执行清理函数（返还函数）→ 执行副作用（回调函数）→ 组件准备卸载 → 执行清理函数（返还函数）→ 组件卸载。

如果单纯想在某一个特定的生命周期执行某些操作，可以通过传递的参数不同来实现：

⚠️只能在函数式组件和自定义 Hooks 之中调用 Hooks，普通函数或者类组件中不能使用 Hooks。

⚠️只能在函数的第一层调用 Hooks。

自定义 Hooks：可以把一些需要重复使用的逻辑自定义成 Hooks，命名必须要以 use 开头。这里暂时不放例子了。

我们在组件中用到的与渲染无关的变量，应该定义为组件的普通属性，而不应该放在 state 中。也就是说，render 中没有用到的，都不应该出现在 state 中。

注意：

React 建议将 state 当作不可变对象，比如当 state 中有数组时，使用 concat、slice、filter 等返回一个新数组的方法，而不是用 push、pop、shift、splice 等直接修改数组的方法。如果有对象时，使用 ES6 的 Object.assign 方法 或者对象扩展语法等。

componentWillMount 钩子会在组件被挂载前调用，也可以从服务端获取数据。如果在服务端渲染，componentWillMount 钩子会被调用两次，而 componentDidMount 钩子 只会被调用一次。所以推荐 componentDidMount 钩子。

父传子：props 属性，子传父：回调

在 DOM 上使用 ref：

在组件上使用 ref：【只能是类组件】

前端性能优化中有一个原则：尽量减少 DOM 操作，而虚拟 DOM 正是这一原则的体现。

DIFF 算法：对比新旧虚拟 DOM，时间复杂度 O(n)。

前提假设：

（1）如果两个元素的类型不同，那么它们将生成两棵不同的树。

（2）为列表中的元素设置 key 属性，用 key 标识对应的元素在多次 render 过程中是否发生变化。

具体来说：

-- HighOrderComponent

高阶函数：以函数为参数，返回值也是函数的函数。类似地，高阶组件就是以 React 组件为参数，返回一个新的 React 组件的组件。

和父组件有啥区别呢？高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是 UI/DOM。如果逻辑是与 DOM 直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑是与 DOM 不直接相关的，那么这部分逻辑适合使用高阶组件抽象，如数据校验、请求发送等。

比如我们写一个 MyComp 组件，来获取 localStorage 中的数据并显示：

如果其他组件也有这样的逻辑时，试试复用：

可以看出高阶组件的主要功能：封装并分离组件的通用逻辑，让通用逻辑在组件中更好地被复用 —— 装饰者设计模式【🚩：后面看一下设计模式】。

前面的例子

比如利用高阶组件将原本受控组件需要自己维护的状态统一提升到高阶组件中。

比如增加布局或者修改样式：

高阶组件除了接收组件作为参数外，还可以接收其他参数。比如：

继承方式实现的高阶组件常用于渲染劫持。例如，当用户处于登录状态时，允许组件渲染；否则渲染一个空组件：

React Router 包含3个库：react-router、react-router-dom 和 react-router-native。

在 Web 应用中安装 react-router-dom：

React Router 通过 Router 和 Route 两个组件完成路由功能。Router 可以理解成路由器，一个应用中只需要一个 Router 实例，所有的路由配置组件 Route 都定义为 Router 的子组件。【和 VueRouer 类似】

在 Web 应用中，一般会根据路由的实现方式分为：

Route 是 React Router 中用于配置路由信息的组件。

如果只想让匹配到的第一个 Route 渲染，可以使用 Switch：

Link 组件定义了点击时页面如何路由：

Redirect 组件用于页面重定向：

在非路由组件中获取路由信息：withRouter 和 Router Hooks。

withRouter 的作用有点类似于 Redux 中的 connect，把要获取路由信息的组件传入 withRouter，withRouter 会把路由信息传递给该组件，并会返回一个新的组件，来方便其他地方调用。

除了使用 withRouter 来为非路由组件获取路由信息之外，在Router5.x中新增加了 Router Hooks，使用规则和 React 的其他 Hooks 一致。

1）useHistory： 调用该 Hook 会返回 history 对象

2）useLocation：调用该 Hook 会返回 location 对象

3）useRouteMatch：调用该 Hook 会返回 match 对象

4）useParams：调用该 Hook 会返回 match 对象中的 params，也就是 path 传递的参数

比如我们有一个 TODO 事项的数据对象：

如果我们需要修改数据，必须发送一个 action：

type 表示 action 的类型，这是 action 必须包含的字段，其他的不是确定的。如何解析 action 呢？Redux 利用 reducer 解析 action，reducer 是一个普通的 JS 函数，接收 action为参数，返回一个新的应用状态 state。

以上就是 Redux 的基础概念：store【数据容器】、state【数据对象】、action【修改命令】、reducer。

Redux 应用需要遵循三大原则：

【PS：所谓纯函数，就是：对于同样的输入，函数总是有同样的输出，且函数的执行不会产生副作用，比如修改外部对象或输出到 I/O 设备】

Redux 的数据流过程：

（1）调用 store.dispatch(action)。一个 action 是一个用于描述“发生了什么”的对象。store.dispatch(action) 可以在应用的任何地方调用，包括组件、XHR 的回调、定时器。

（2）Redux 的 store 调用 reducer 函数。store 传递两个参数给 reducer：当前应用的状态和 action。reducer 必须是一个纯函数，它的唯一职责是计算下一个应用的状态。

（3）根 reducer 会把多个子 reducer 的返回结果组合成最终的应用状态。根 reducer 的构建形式完全取决于用户。Redux 提供了 combineReducers，方便把多个拆分的子reducer 组合到一起，但完全可以不使用它。当使用 combineReducers 时，action 会传递给每一个子 reducer 处理，子 reducer 处理后的结果会合并成最终的应用状态。

（4）Redux 的 store 保存根 reducer 返回的完整应用状态。此时，应用状态才完成更新。如果 UI 需要根据应用状态进行更新，那么这就是更新 UI 的时机。对于 React 应用而言，可以在这个时候调用组件的 setState 方法，根据新的应用状态更新 UI。

使用 Redux：

根据意图的不同，组件可以分为容器组件和展示组件：

react-redux 提供了一个 connect 函数，用于把 React 组件和 Redux 的 store 连接起来，生成一个容器组件，负责数据管理和业务逻辑：

react-redux 提供了一个 Provider 组件：

Provider 组件通过 context 把 store 传递给子组件，所以一般将 Provider 组件用作根组件：

1）如何组织项目结构？

2）设计 state：像设计数据库一样设计 state

至此算是完成了 React 入门，在了解 React 的过程中，感受之一是 React 对于 JavaScript 基础的要求更高一些，比如 this 指向、高阶函数、class 这些，而且抽象程度也更高，比如高阶组件、Redux 中间件等等，其中每一个点都值得深挖学习。

Anyway，总算开始学习 React 了，“框架是相通的”这句话不假，有 Vue 的使用经验能在很大程度上帮助我对 React 的理解。后续打算写一写小 demo 增加对 React 的熟练度，同时慢慢了解下原理性的东西。🔑