- 博客(11)
- 收藏
- 关注
RSS订阅原创 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
397
原创 React SSR路由支持实现
实现思路分析 在 React SSR 项目中需要实现两端路由. 客户端路由是用于支持用户通过点击链接的形式跳转页面. 服务器端路由是用于支持用户直接从浏览器地址栏中访问页面. 客户端和服务器端公用一套路由规则，路由规则是同构代码 路由规则 使用数组形式配置信息，在普通的 node 环境下也可识别 // share/routes.js import Home from '../share/pages/Home'; import List from '../share/pages/List'; export
2021-08-27 14:42:18
428
原创 React SSR实现给元素添加事件
承接上文 React SSR笔记 实现思路分析 在客户端对组件进行二次"渲染", 为组件元素附加事件. 客户端二次"渲染" hydrate 使用hydrate 方法对组件进行渲染, 为组件元素附加事件. hydrate 方法在实现渲染的时候, 会复用原本已经存在的DOM 节点, 减少重新生成节点以及删除原本DOM 节点的开销.通过react-dom 导入hydrate. //share同构代码 Home.js import React from "react"; function Home() { .
2021-08-24 18:08:51
464
原创 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
326
原创 React 性能优化
文章来自拉勾教育大前端高薪训练营 React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。 1. 组件卸载前进行清理操作 在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能. 需求：开启定时器然后卸载组件，查看组件中的定时器是否还在运行。 import React, { useState, useEffect } from "react" import .
2021-08-23 18:25:16
125
原创 React 表单 Formik 库使用
文章来自拉勾教育大前端高薪训练营 Formik使用笔记Formik 基本使用表单验证使用 Yup 进行表单验证组件方式构建表单自定义表单控件构建复选框 Formik用于增强表单处理能⼒. 简化表单处理流程 官网链接: https://jaredpalmer.com/formik/. Formik 下载 npm install formik Formik 基本使用 使用 Formik 的 useFormik 方法配置基本使用方法，方法调用返回 formik 对象，对象存储了表单的方法对对象；需要绑定表单.
2021-08-20 11:18:37
473
原创 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
2147
3
原创 React Hooks常用的Hooks钩子函数
React Hooks的作用是对函数型组件进⾏增强，让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒，可以在不使⽤类组件的情况下, 实现相同的功能。 useState实现原理 useState方法接收参数，可以是普通值，也可以接收函数做为参数，如果是函数做为参数，组件初始化时会调用函数，返回的结果就时初始状态值；useState方法调用返回数组，数组参数为状态值跟改变状态值的方法；useState使用闭包的方式存储状态，能多次调用，因此需要外部声明数组变量存储状态值跟方法，并添加索引；当调用更改状态方法
2021-08-16 17:16:06
1163
2
原创 redux核心逻辑及redux中常用API的方法实现
redux核心通过获取调用creactStore获取store核心getState()方法、dispath()方法、subscribe()方法 首先定义creactStore方法，方法有三个参数reducer(ruducer函数)，preloadedState(状态),enhancer(加强dispath方法)
2021-08-09 17:41:32
473
原创 vue3.0 模拟VueRouter history模式
实现前分析 核心代码 VueRoute是通过Vue注册的插件，需要有一个静态的install方法 构造函数 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210706160050265.png 创建router-link组件,router-link就是一个a标签，vue-cli创建的项目，默认使用的是运行版本的vue，所以不能识别template，可以使用完整版本vue，详见https://cli.vuejs.org/config/#vue-config-js，这
2021-07-30 16:17:53
372
原创 使用 class 模拟实现 vue 基本的响应式数据原理
下面展示一些 内联代码片。 // 模板文件 <body> <div id='app'> <h1>差值表达式</h1> <h3>{{ msg }}</h3> <h3>{{ count }}</h3> <h1>v-text</h1> <div v-text="msg"></div>
2021-07-30 16:16:47
311
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人