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

React的历史与应用

React的诞生

2010 年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
2011 年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型:

2012年在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造了 React。
2013年React 正式开源，在2013 JSConf 上 Jordan Walke介绍了这款全新的框架:

React的应用与拓展

React 的应用场景非常的广，它不仅可以用于前端应用以及移动原生应用的开发，通过与 Electron 的结合，它还能够开发桌面应用。许多知名网站以及应用的开发都用到了 React 技术。

React 生态经过长时间的发展，已经出现了许多的新工具和新框架，它们拓展了 React 的功能，解决了许多开发过程中的阻碍和问题，这为我们能够使用 React 在更多的领域进行开发和拓展，也让 React 能够适用于更多的应用场景。

React的设计思路

UI编程痛点

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

响应式与转化式

响应式系统注重事件的监听和消息的驱动，比如监控系统和 UI 界面，转化式系统注重给定[输入]求解[输出]，如编译器和数值计算。响应式系统的执行过程是在产生事件后，执行既定的回调，实现状态的变更。响应式编程正是解决原生 JS 开发中上述痛点的有效方式，使用响应式编程能够实现 UI 自动更新，前端代码组件化，可复用，可封装。状态之间的互相依赖关系，也只需声明即可。

组件化

组件是组件的组合/原子组件。
组件内拥有状态，外部不可见。
父组件可将状态传入组件内部。
组件声明了状态和 UI 的映射。
组件有 Props/State 两种状态。
“组件”可由其他组件拼装而成。

生命周期

与 Vue 一样，React 也拥有生命周期。

React （hooks）的写法与 React 实现

hooks 写法

在 React 组件中要声明一个新状态需要手动去调用 useState 这个函数，这个函数传入一个状态的初始值，返回一个数组，数组的第一个是状态本身，第二个是状态的set。以下是一个简单的更新 UI 的例子。

import React, { useState } from 'react ';
function Example() {
  // Declare a new state variable,which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</ p>
      <button onClick={() => setCount(count + 1)}>
        click me
      </button>
    </div>
  );
  }

虚拟DOM

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

React 状态管理库与应用级框架科普

核心思想

将状态从组件中抽离，使用一个状态管理库去进行统一管理，这样就能够使得每一个组件与状态管理库进行交互的过程中实现状态的共享。

状态机

状态机本身有一个当前的状态，当事件传入状态机时，状态机会根据当前的状态与事件本身来迁移至下一个状态。

应用级框架

现在有着大公司已经开发出了他们自己的 React 的开发框架，它们都有自己的特点。