前端框架
文章平均质量分 70
React,vue,angular等框架学习笔记
Whoopsina
不问前程,但行其事
展开
-
React SSR原生实现服务端渲染
代码仓:React SSR原生实现文章目录服务端渲染1. 客户端渲染存在的问题2. webpack打包配置3. 客户端React附加事件4. 实现服务器路由5. 实现Redux支持6. 防范XSS攻击CSR:Client Side Rendering,服务器端仅返回JSON数据,DATA和HTML在客户端进行渲染SSR : Server Side Rendering,服务器端返回HTML,DATA和HTML在服务器端进行渲染src目录下新建三个文件夹client(客户端代码),server(服.原创 2022-04-16 22:42:41 · 222 阅读 · 0 评论 -
React hooks使用与实现原理剖析
文章目录1. React hooks介绍2. React hooks使用useState()useReduceruseContextuseEffectuseMemomemo方法useCallbackuseRef3. 自定义hook4. React 路由 Hooks5. React Hooks原理分析useState钩子函数的实现原理useEffect钩子函数的实现原理useReducer钩子函数的实现原理1. React hooks介绍React Hooks是用来做什么的?对函数型组件进行增强,让函原创 2022-03-29 08:49:56 · 1534 阅读 · 0 评论 -
发布订阅模式与观察者模式简单实现
发布订阅模式我们假定,存在一个事件中心,某个任务执行完成,就像事件中心发布一个信号,其他任务可以向信号中心订阅这个信号,从而知道什么时候自己可以开始执行,这就叫做发布订阅模式;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2022-02-13 16:49:09 · 196 阅读 · 0 评论 -
Vuex快速入门指南
Vuex只有组件之间共享的数据,才有必要存储到Vuex中;对于组件中的私有数据,依旧存储在组件的自身data中即可。2. Vuex的基本使用3. Vuex的核心概念第一种方法:先在store.js文件中的state提供数据然后在组件中通过this.$store.state.count访问第二种方法:触发Mutation的第一种方式只有Muta...原创 2020-03-24 21:16:23 · 268 阅读 · 1 评论 -
Vue组件中name属性的作用
查看其他人写的组件代码的时候经常会发现使用了name属性,今天来把name属性的经常使用的场景归纳一下1.组件自身调用,递归组件当在组件中需要调用自身的时候,可以通过name属性来使用2.使用vue-tools工具时的组件名称当使用调式工具时,组件的名称是通过name属性来设置的3.移除keep-alive状态下组件自动缓存功能我们知道,在组件外使用了keep-alive导致我们第二次进入的时候页面不会重新请求ajax,即mounted() 钩子函数只会执行一次解决的办法一个增加activat原创 2021-03-20 09:42:18 · 4519 阅读 · 1 评论 -
vuex中利用缓存解决刷新state数据丢失问题
在使用vuex的过程中,经常会遇到刷新页面时state中数据丢失,此时可以利用本地缓存解决注意:实例代码为uniapp项目,可以将缓存方法转换为原生//在index.js中state: { userInfo: null},getters:{ userInfo(state) { if(!state.userInfo){ state.userInfo = uni.getStorageSync('userInfo'); } return state.userInfo }},原创 2021-03-05 17:42:35 · 1175 阅读 · 0 评论 -
React 如何组件性能优化实践
React 组件性能优化最佳实践React 组件性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virtual DOM 比对的频率。1. 组件卸载前进行清理操作在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能.需求:开启定时器然后卸载组件,查看组件中的定时器是否还在运行。import React, { useState, useEffect } from "react"import ReactDOM from "reac原创 2022-02-12 11:50:18 · 267 阅读 · 0 评论 -
Vue组件传参的方式总结
vue组件之间传参的方式有很多种,下面是我自己总结的一些方式,仅供参考:1.props/$emit2.vuex3.EventBus(事件总线)4.$parent和 $children5.provide/inject6.slot原创 2021-04-01 14:51:33 · 81 阅读 · 0 评论 -
React生命周期详解
React生命周期所谓的React生命周期,就是指组件从被创建出来,到被使用,最后被销毁的这么一个过程;而在这个过程中,React提供了我们会自动执行的不同的钩子函数,我们称之为生命周期函数;**组件的生命周期大致分为三个阶段:组件挂载阶段,组件更新阶段,组件销毁卸载阶段 **16.4之后的声明周期图谱如下:组件初始化阶段由ReactDOM.render()触发—初次渲染constructor()getDerivedStateFromPropsrender()componentDid原创 2022-02-10 23:15:05 · 4522 阅读 · 1 评论