拉勾小迷弟-CSDN博客

原创 React SSR 支持 Redux 实现

实现思路分析在实现了 React SSR 的项目中需要实现两端 Redux客户端 Redux 就是通过客户端 JavaScript 管理 Store 中的数据.服务器端 Redux 就是在服务器端搭建一套 Redux 代码, 用于管理组件中的数据.客户端和服务器端共用一套 Reducer 代码.创建 Store 的代码由于参数传递不同所以不可以共用.实现客户端 Redux创建 Store配置 Store创建 Action 和 Reducer配置 polyfill由于浏览器不能识别

2021-08-28 10:10:38 258

原创 React SSR路由支持实现

实现思路分析在 React SSR 项目中需要实现两端路由.客户端路由是用于支持用户通过点击链接的形式跳转页面.服务器端路由是用于支持用户直接从浏览器地址栏中访问页面.客户端和服务器端公用一套路由规则，路由规则是同构代码路由规则使用数组形式配置信息，在普通的 node 环境下也可识别// share/routes.jsimport Home from '../share/pages/Home';import List from '../share/pages/List';export

2021-08-27 14:42:18 317

原创 React SSR实现给元素添加事件

承接上文 React SSR笔记实现思路分析在客户端对组件进行二次"渲染", 为组件元素附加事件.客户端二次"渲染" hydrate使用hydrate 方法对组件进行渲染, 为组件元素附加事件.hydrate 方法在实现渲染的时候, 会复用原本已经存在的DOM 节点, 减少重新生成节点以及删除原本DOM 节点的开销.通过react-dom 导入hydrate.//share同构代码 Home.jsimport React from "react";function Home() { .

2021-08-24 18:08:51 355

原创 React SSR渲染

什么是客户端渲染CSR：Client Side Rendering服务器端仅返回 JSON 数据, DATA 和 HTML 在客户端进行渲染什么是服务器端渲染SSR：Server Side Rendering服务器端返回HTML, DATA 和 HTML 在服务器端进行渲染.React SSR 同构同构指的是代码复用. 即实现客户端和服务器端最大程度的代码复用客户端渲染存在的问题1. 首屏等待时间长, 用户体验差2. 页面结构为空, 不利于 SEO实现 SSR项目结构reac

2021-08-24 15:57:27 252

原创 React 性能优化

文章来自拉勾教育大前端高薪训练营React 组件性能优化最佳实践React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。1. 组件卸载前进行清理操作在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能.需求：开启定时器然后卸载组件，查看组件中的定时器是否还在运行。import React, { useState, useEffect } from "react"import .

2021-08-23 18:25:16 85

原创 React 表单 Formik 库使用

文章来自拉勾教育大前端高薪训练营Formik使用笔记Formik 基本使用表单验证使用 Yup 进行表单验证组件方式构建表单自定义表单控件构建复选框Formik用于增强表单处理能⼒. 简化表单处理流程官网链接: https://jaredpalmer.com/formik/.Formik 下载npm install formikFormik 基本使用使用 Formik 的 useFormik 方法配置基本使用方法，方法调用返回 formik 对象，对象存储了表单的方法对对象；需要绑定表单.

2021-08-20 11:18:37 388

原创 Redux Toolkit工具使用

Redux Toolkit是Redux官方推出的工具集，因为Redux编写过程中会写很多的样板代码，对开发者不太友好，因此官方推出Redux Toolkit，Redux Toolkit就是对Redux的二次封装，用于高效 Redux 开发，使 Redux 的使用变得简单，下面用 Redux Toolkit 实现 TodoList 案例npm i @reduxjs/toolkit目录结构创建状态切片对于状态切片，我们可以理解为就是 Reducer 和 Action 的集合体；在 Redux 中，原

2021-08-17 19:44:37 1891 3

原创 React Hooks常用的Hooks钩子函数

React Hooks的作用是对函数型组件进⾏增强，让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒，可以在不使⽤类组件的情况下, 实现相同的功能。useState实现原理useState方法接收参数，可以是普通值，也可以接收函数做为参数，如果是函数做为参数，组件初始化时会调用函数，返回的结果就时初始状态值；useState方法调用返回数组，数组参数为状态值跟改变状态值的方法；useState使用闭包的方式存储状态，能多次调用，因此需要外部声明数组变量存储状态值跟方法，并添加索引；当调用更改状态方法

2021-08-16 17:16:06 985 2

weixin_43016472的博客