SPA 原理和为什么是 hook

单页面应用 (Single page App),核心思想是整个网站只有一个 HTML 页面，页面中的内容通过 JavaScript 动态更新

路由变化 (URL) 并不会触发浏览器的整页刷新，而是由前端路由控制页面内容切换

从点击 URL 到使用页面发生了什么？

以下是一个为表示时间过程的粗略模型

  1. 浏览器发送 HTTP 请求
  • 用户点击链接或者输入 URL
  • 浏览器向服务器发送请求
  • 此时发生两种情况

A. 首屏访问

  • 浏览器发起请求到服务器
  • 服务器返回一个通用的 index.html
  • 这个 HTML 中包含一个空的根节点 <div id='root'></div>
  • 以及打包好的 React 脚本文件

B. 前端路由跳转

  • 这时 React Router 拦截了浏览器的点击事件
  • 阻止了浏览器的默认跳转
  • 只在前端更新 URL
  • 页面不刷新, React 重新渲染对应的组件
  1. 接首屏访问

浏览器接收 index.html 并执行

  • 解析 HTML 文件
  • 请求并执行 main.js 文件
  • React 脚本启动创建根元素
  1. React 启动阶段
  • React 创建虚拟 DOM
  • 将虚拟 DOM 渲染为真实 DOM
  1. React Router 控制前端路由
  • 根据当前 URL 匹配到某个组件，执行对应的组件式函数
  1. 请求数据和状态更新
  • 挂在组件后，会进行 useEffect 异步更新一些数据和状态

为什么是 react hooks ?

钩子可以给与函数式组件在不同的生命周期存储状态和运行副作用效果的能力

hooks: 钩子，是一些内置的函数允许我们能拿到一些 react 不能直接使用的内部机制，以下是一些内部机制例子

  • 从 fiber tree 中创建状态
  • 向 fiber tree 中注册副作用函数
  • 手动选择 DOM
  • …

fiber tree 是 react 的内部机制，一般我们无法直接访问，但是 react 提供了访问它的函数，即钩子

并且钩子总是以 ‘use’ 开头，例如 useState,useEffect，useMemo,useCallback,useRef…