皮蛋很白的博客

文章详情页文章详情页要使用编程的方式去创建，并且要通过本地插件去实现。创建本地插件创建 plugins/gatsby-plugin-article/gatsby-node.js，在 plugins/gatsby-plugin-article 插件文件夹下生成 package.json（npm init -y）。配置插件// gatsby-config.jsmodule.exports = { plugins: [ { resolve: "gatsby-plugin-cre

文章列表页实现思路文章列表不会频繁变化，但是当发布文章时，应该向用户展示最新数据。为了 SEO 和访问速度的兼顾，以及用户体验的提升，实现思路如下：在构建应用时，先将文章现有的数据进行静态生成，这样当用户访问文章列表页面的时候就不需要等待，并且有助于 SEO 爬虫工具抓取内容。但是如果有用户发布文章，新发布的文章不会立即显示在页面中当页面加载时动态从服务器获取数据，并将最新的数据显示在页面中。这样的结果是，用户会立即看到静态页面中的数据，然后再看到最新的数据。具体步骤创建

实现登录登录页面属于静态内容和动态内容混合的页面，登录之后的用户状态需要 Redux 管理。安装和配置 Axios发送请求需要安装 Axios 模块：npm i axios配置 Axios 基础地址：// gatsby-browser.js// 用到 JSX 语法，所以要引入 Reactconst React = require("react")// 组件是 ESM 语法，所以用 default 引入默认导出const Layout = require("./src/components/

案例说明使用 Gatsby 开发基于 realworld 模板的混合应用。realworld 模板和API：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.mdGatsby 不仅是静态站点生成器，还支持混合应用，即静态内容和动态内容的混合。静态内容就是在构建页面时生成的静态 HTML。在 realworld 项目中，不需要登录就可以展示给用户的页面需要做成静态页面，

管理页面中的元数据安装模块向页面添加 SEO，也就是管理页面的元数据，需要安装两个模块：react-helmet：一个组件，用于设置文档的 head。页面加载后通过 JS 设置文档的 headgatsby-plugin-react-helmet：Gatsby 插件，用于生成静态 HTML 页面（gatsby build）时将 react-helmet 设置的 head 添加到 Gatsby 构建的静态 HTML 页面中。安装模块：npm i react-helmet gatsby-pl

开发数据转换（Transformer）插件插件介绍数据转换插件主要做三件事情：找到要转换的数据节点转换节点内容的数据格式将转换后的数据添加到数据层中需求：将 xml 数据转换为 JavaScript 对象。插件开发步骤在 plugins 文件夹中创建 gatsby-transformer-xml 文件夹在插件文件夹中创建 gatsby-node.js 文件在文件中导出 onCreateNode 方法，该方法会在每个节点构建完成时执行，可以获取节点信息根据节点类型筛选 xml 节点

开发数据源（Source）插件插件介绍数据源插件主要做两件事：从外部获取数据将数据添加到数据层，创建数据查询节点，供开发者使用需求：本例开发一个从 Strapi 获取数据的本地插件。本地插件开发步骤每个 Gatsby 插件都是一个 npm 包，可以单独发布或者作为本地插件存放在项目中。创建本地插件的步骤：在项目根目录创建 plugins 文件夹，Gatsby 规定本地插件放置在根目录的 plugins 文件夹中在 plugins 中创建具体的插件文件夹 gatsby-source-

Strapi 创建 CMS 内容管理系统Strapi 是基于 Node.js 的开源免费的 CMS 内容管理系统。创建项目npx create-strapi-app <project-name>本例选择 quickstart 快速创建项目，并且不使用模板。项目创建完成后会自动启动项目，并且在浏览器打开。首次访问需要注册用户，注册后登录。创建内容类型打开 内容类型生成器，创建 Post 分类，并添加三个字段：title：文章标题date：文章日期content：文章内容

Gatsby 插件Gatsby 框架内置插件系统，插件是为应用添加功能的最好的方式。在 Gatsby 中有三种类型的插件：数据源插件（source）：负责从应用外部获取数据，将数据统一放在 Gatsby 的数据层中数据转换插件（transformer）：负责转换特定类型的数据的格式，比如将 Markdown 文件中的内容转化成对象形式功能插件（plugin）：为应用提供功能，比如通过插件让应用支持 Less 或 TypeScriptGatsby 官方提供了非常多且非常有用的插件，开发者也可以

GraphQL 数据层介绍在 Gatsby 框架中提供了一个统一的存储数据的地方，叫做数据层。Gatsby 在构建应用时，会先从外部源获取数据并将数据放入数据层，组件可以直接从数据层查询数据。目的：由于外部数据源的多样性，造成了数据格式的多样性。将数据统一存储在数据层，有助于统一对数据格式进行转化，有助于对数据资源进行统一的规划处理。Gatsby 数据层是使用 GraphQL 构建的。GraphQL 调试页面：http://localhost:8000/___graphql示例构建查询命

本文 Gatsby 版本为 v3。Gatsby介绍Gatsby 是一个基于 React 的静态站点生成器。Gatsby 通过 React 开发应用，当应用开发完成后，Gatsby 可以把这个 React 应用转化成静态的 HTML 应用。静态应用的优势访问速度快更利于 SEO 搜索引擎的内容抓取部署简单工作流程在 Gatsby 应用的工作流程中主要分为了三个部分：DATA SOURCES - 数据源Gatsby 应用中的数据可以来自 Markdown JSON CMS数据.

路由支持实现思路在 React SSR 项目中需要实现两端路由：客户端路由用于支持用户通过点击链接的形式跳转页面。服务器端路由用于支持用户直接从浏览器地址栏中访问页面。客户端和服务器端共用一套路由规则，所以路由规则代码属于同构代码。新增一个页面新增一个 List 页面用于测试路由切换：// src\share\pages\List.jsimport React from 'react'function List() { return <div>List wo

React SSR 介绍什么是客户端渲染CSR：Client Side Rendering数据和 HTML 的拼接是在客户端（浏览器）使用 JavaScript 完成的，服务端只需要返回 JSON 数据即可。使用 React 开发的项目是客户端渲染的单页应用（SPA）。什么是服务器端渲染SSR：Server Side Rendering数据和 HTML 的拼接是在服务器端完成的，客户端向服务器端发送请求，服务器端返回拼接好的 HTML，客户端只需将其显示出来。客户端渲染存在的问题首屏等待

实现 Fiber 算法准备工作首先准备一段 JSX，之后将实现 Fiber 算法将这段 JSX 内容渲染到页面中。// src/index.jsimport React from './react'const jsx = ( <div> <p>Hello React</p> </div>)console.log(jsx)Babel 会将 JSX 转换成 React.createElement()方法的调用，调用结果是生成的

案例实践使用 create-react-app 新建项目。表单使用 Chakra UI 实现下图的表单：构建注册表单react-icons 是一个 React 流行图标库。// components/SignUp.jsimport { Input, // 文本框 InputGroup, // 文本框分组 Stack, // 布局组件 设置子元素坚决 InputLeftAddon, // 文本框左侧内容 InputRightAddon, // 文本框右侧内容 FormC

全局组件样式配置官方文档：Component Style基础样式和修改器样式大多数组件的样式由基础样式和修改器样式组成，修改器样式根据某些特性或状态更改其大小或视觉样式。基础样式：默认样式修改器样式：可以根据 props 切换的样式常用的修改器样式包括：Size：组件的尺寸（例如 small medium large）根据 props.size 切换Variant：组件的视觉风格（例如 outline、solid、ghost）根据 props.variant 切换Co

主题对象使用Chakra UI 默认主题对象中包含很多样式的预设值。打印 theme 对象：在使用样式属性设置样式的时候，Chakra 会先从主题对象中获取对应的预设值，如果不存在，则将值作为 CSS 的值去设置。例如：<Box bg="gray.200"></Box> 会找到 theme.colors.gray.200 即 #E2E8F0。<Box bg="gray"></Box> 没有对应的预设值，最终则会设置为 gray。文档：

Color Mode 颜色模式Chakra UI 内置支持管理应用程序的颜色模式，默认可配置的颜色模式有浅色模式（light）、暗色模式（dark）、系统模式（system）。大部分组件默认都支持暗色模式（dark mode）。Chakra 将颜色模式存储在 localStorage中，通过给 <body>附加一个类名确保颜色模式是持久的，切换暗色模式Chakra UI 模式使用的浅色模式（light）。可以使用钩子函数 useColorMode获取和切换当前颜色模式。import

Chakra UIChakra UI 是简单、模块化和可访问的 UI 组件库。本文 Chakra UI 版本：v1.6.2基于 React 和 Emotion（CSS-IN-JS 方案库）基于 Styled SystemStyled System 构建的 UI 组件，可以通过样式属性快速设置样式Chakra UI 主题设置规范参考 Styled System Theme Specification支持开箱即用的主题功能基于 Chakra 默认提供的主题进行构建或扩展支持颜

CSS-IN-JS"CSS in JS" 是一种在 JavaScript 文件中集成 CSS 代码的解决方案。这种方案旨在解决 CSS 的局限性，例如缺乏动态功能，作用域和可移植性。为什么会有 CSS-IN-JS缺乏作用域缺乏可移植性缺乏动态功能其它参考：阮一峰 - CSS in JS 简介缺乏作用域以前开发 web 项目都是以**“页面”为单位，为了将关注点分离**，一般都是将 CSS、JS 以文件的方式引入 HTML 文件。而现在开发 web 项目都是以**“组件”**为单位，所

Formik 介绍和基本使用介绍Formik 是 React 官方推荐使用的用于增强表单处理能力，简化表单处理流程的第三方模块。让开发者更建单的开发表单，更专注于业务。包含验证、追踪访问字段以及处理表单提交的完整解决方案。基本使用使用 formik 进行表单数据绑定及表单提交处理。只需要使用 formik 创建一些内容，然后将这些内容与 form 表单进行绑定即可：formik 提供一个 useFormik 方法用于创建表单内容，它接收一个配置对象，可以配置：initialValu

实现 useState 钩子函数useState 示例function App() { const [count, setCount] = useState(0) return ( <div> {count} <button onClick={() => setCount(count + 1)}>setCount</button> </div> )}export default Appu

自定义 Hook 函数自定义 Hook 是标准的封装和共享逻辑的方式，其实就是逻辑和内置 Hook 的组合，用于将组件逻辑提取到可重用的函数中。自定义 Hook 是一个函数，其名称以 use 开头，函数内部可以调用其它的 Hook。使用自定义 Hook 提取可复用的逻辑，相比 render props 和 高阶函数简单很多。示例1初始示例import { useState, useEffect, useRef} from 'react'function App() { const [co

useMemo 钩子函数useMemo 的行为类似 Vue 中的计算属性，可以监测某个数据的变化，根据变化值计算新值，计算出的新值可以参与视图渲染。useMemo会缓存计算结果，如果监测值没有发生变化，即使组件重新渲染，也不会重新计算，此行为有助于避免在每个渲染上进行昂贵的计算。使用useMemo 接收一个计算函数和依赖项数组。计算函数：当监听的数据发生变化，执行这个函数，函数返回的值就是计算的新值依赖项数组：需要监听的数据如果不传，则会在每次渲染时执行计算函数如果传一个空数组则仅会在初

useState 钩子函数介绍用于为函数组件引入状态。通常情况下，函数中的变量在函数执行完就会被释放掉，useState 方法通过闭包（将数据存储在组件函数外）让函数型组件实现保存和变更状态。useState 接收一个初始状态的值作为参数，返回一个数组，数组的第一个元素是状态数据，第二个元素是设置状态数据的方法，该方法接收一个参数用于修改状态数据。可以通过数组解构的方式将数组中的元素解构出来。组件重新渲染时，useState 会获取状态的值，忽略设置的初始值。使用import { useSt

目录React Hooks 介绍React Hooks 钩子函数的介绍和使用模拟 React Hooks 钩子函数的实现原理React HooksReat Hooks 介绍React Hooks 是 React 16.8 版本新添加的特性，实际上是一堆钩子函数。React Hooks 主要是增强函数型组件的功能，让函数型组件可以实现类组件相同的功能，例如：使用和存储 state（状态）拥有处理副作用的能力从 React 16.8 版本开始，React 官方推荐开发者使用函数去创建

加载远端任务加入请求服务端数据的异步任务。Redux 中通过 saga 或 thunk 中间件完成。MobX 通过 runInAction 创建一个立即触发的临时 Action，用于在异步操作完成之后调用，更新状态。配置远端请求配置远端请求# 使用 json 文件模拟 restapinpm install -g json-serverjson-server ./src/todo.json --port 3005./src/todo.json：{ "todos": [ {

删除待办事项// src\stores\TodoStore\TodoListStore.jsimport { makeObservable, observable, action } from "mobx";import TodoViewStore from "./TodoViewStore";import { createContext, useContext } from 'react'class TodoListStore { // 待办列表 todos = [] const

TodoList 案例静态资源组件// src\components\Todos\TodoListView.jsimport TodoHeader from "./TodoHeader"import TodoFooter from "./TodoFooter"import TodoView from "./TodoView"function TodoListView() { return ( <section className="todoapp"> &l

makeAutoObservable 详解makeAutoObservable(target, overrides?, options?)target：将目标对象中的属性和方法设置为 Observable State 和 Actionoverrides：覆盖默认设置，将 target 对象中的某些属性或方法设置为普通属性因为并不是所有的属性或方法都需要转化overrides 对象中的 key 是需要覆盖的属性或方法的名称，value 为 false 的会被设置成普通属性options：配

计数器案例计数器：在组件中显示数值状态，单击+按钮使数值加1，单击重置按钮使数值重置。下载mobx：MobX 核心库mobx-react-lite：仅支持函数组件mobx-react：既支持函数组件也支持类组件由于 React 官方推荐使用函数式组件，所以下面的学习使用 mobx-react-litenpx create-react-app appcd appnpm install mobx mobx-react-lite当前安装版本："mobx": "^6.3.0","m

MobX 简介Mobx 介绍官方文档简单，可扩展的状态管理库。MobX 是由 Mendix，Coinbase（比特币公司），Facebook 开源和众多个人赞助商所赞助的。MobX 和 Redux 做的事情是一样的，都是通过一个对象去管理应用程序中的状态。但是和 Redux 相比，MobX 又及其简单，因为它没有过多的流程和样板代码。流程Redux 要求必须严格遵守它的工作流程，例如通过 dispatch 触发 action，由 store 接收到 action，然后交给 reduc

核心逻辑createStore(reducer, preloadedState , enhancer)参数：reducer（function） - 根据 Action.type 对 Store 中的状态进行更改preloadedState（any） - 初始状态enhancer（function） - 对 Store 的功能进行增强，例如添加中间件返回 Store 对象，包含三个方法：getState - 获取状态dispatch - 触发 Actionsubscribe - 添加监

Redux 中间件 middleware什么是中间件中间件本质上就是一个函数。中间件允许我们扩展和增强 redux 应用程序，主要体现在对 Action 的处理能力上。一般情况下，一个 Action 的会直接被 Reducer 处理的，当加入了中间件之后，这个 Action 会优先被中间件处理，当中间件处理完毕后，再将这个 Action 传递给 Reducer 继续处理。加入了中间件 Redux 工作流程：开发中间件Redux 中间件本质上是一个柯里化形式的函数。开发中间件的模板代码：e

在 React 中使用 Redux 解决的问题在 React 项目中未加入 Redux 时的问题在 React 中组件通信的数据流是单向的，顶层组件可以通过 props 属性向下层组件传递数据，而下层组件不能直接向上层组件传递数据。要实现下层组件修改上层组件的数据，需要上层组件传递修改数据的方法到下层组件。当项目越来越大的时候，组件之间传递数据以及传递修改数据的方法变得越来越困难。在 React 项目中加入 Redux 的好处使用 Redux 管理数据，由于 Store 独立于组件，使得数据管理独

Redux 简介Redux 介绍JavaScript 状态容器，提供可预测化的状态管理。状态容器容器：一个 JavaScript 对象状态：容器对象中的数据，对应 web 页面中 DOM 元素的状态const state = { modelOpen: 'yes', // 弹窗是否打开 btnClicked: 'no', // 按钮是否被点击 btnActiveClass: 'active', // 按钮的class page: 5, // 分页的页码 size: 10 /

从 render 阶段进入commit 阶段重新回到 performSyncWorkOnRoot 方法中。该方法中通过调用 workLoopSync 方法，循环构建每一个 React 元素所对应的 fiber 对象，当构建完成就会进入 commit 阶段。实际就是下面这段代码：// packages\react-reconciler\src\ReactFiberWorkLoop.js// 将构建好的新 Fiber 对象存储在 finishedWork 属性中// 提交阶段使用root.fini

构建其余节点上面已经看完beginWork，是从父到子，构建子级节点的 fiber 对象，这是递归的 “递”阶段。接着解析 completeUnitOfWork，这是从子到父，构建其余节点的 fiber 对象，是递归的 “归”阶段。completeUnitOfWork不仅仅是构建其余节点的 fiber 对象，它在从子级到父级的过程中会经过每一个 fiber 节点对象，主要完成的事情包括：构建其余节点的 fiber 对象为每个 fiber 节点对象构建对应的真实 DOM 对象，并添加到 state

workLoopSync 解析上面已经把 workInProgress Fiber 树中的 rootFiber 构建完成，接下来要构建它的子级 fiber 对象了。这个子级 fiber 对象就是 render 方法的第一个参数，它在代码走到 workLoopSync 方法时开始被构建。workLoopSync 就是开启一个循环，以同步的方式开始构建 fiber 对象workLoopSyncworkLoopSync 仅仅开启了一个 while 循环，用于构建 rootFiber 对象的所有子级 fi

构建 workInProgress Fiber 树中的 rootFiber之前通过判断当前任务如果是同步任务就会调用 performSyncWorkOnRoot 同步任务入口方法。一旦调用这个方法，就说明正式进入 render 阶段了。在 render 阶段，就要在 workInProgress Fiber 树中为每一个元素构建 fiber 对象。performSyncWorkOnRootperformSyncWorkOnRoot 方法中最核心的就是：调用 prepareFreshStack