摘要: Debounce debounce 原意消除抖动,对于事件触发频繁的场景,只有最后由程序控制的事件是有效的。 防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在定时器期间事件再次触发的话则清除重置定时器,直到定时器到时仍不被清除,事件才真正发生。 const debounce 阅读全文
posted @ 2022-10-12 08:56 beifeng11996 阅读(34) 评论(0) 推荐(0) 编辑
摘要: redux中间件 中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流,实现如异步action ,action 过滤,日志输出,异常报告等功能 redux-logger 阅读全文
posted @ 2022-10-11 19:36 beifeng11996 阅读(28) 评论(0) 推荐(0) 编辑
摘要: mixin Mixin 设计模式 Mixin(混入)是一种通过扩展收集功能的方式,它本质上是将一个对象的属性拷贝到另一个对象上面去,可以拷贝多个属性到一个对象上,为了解决代码复用问题。 常用的方法:JQuery 的 extend 方法。 var LogMixin = { log: function( 阅读全文
posted @ 2022-10-11 18:52 beifeng11996 阅读(23) 评论(0) 推荐(0) 编辑
摘要: 前言 所谓同构,简而言之就是,第一次访问后台服务时,后台直接把前端要显示的界面全部返回,而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。 同构概念并不复杂,它也非项目必需品,但是探索它的原 阅读全文
posted @ 2022-10-10 10:27 beifeng11996 阅读(37) 评论(0) 推荐(0) 编辑
摘要: 前言:最近接触到一种新的(对我个人而言)状态管理方式,它没有采用现有的开源库,如redux、mobx等,也没有使用传统的useContext,而是用useState + useEffect写了一个发布订阅者模式进行状态管理,这一点对我来说感觉比较新奇,以前从没接触过这种写法,于是决定研究一下目前比较 阅读全文
posted @ 2022-10-10 10:18 beifeng11996 阅读(25) 评论(0) 推荐(0) 编辑
摘要: Redux可是一个大名鼎鼎的库,很多地方都在用,我也用了几年了,今天这篇文章就是自己来实现一个Redux,以便于深入理解他的原理。我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码的NPM包,但是功能保持不变。本文只会实现Redux的核心库,跟其他库的配合使用,比如React-R 阅读全文
posted @ 2022-10-10 10:10 beifeng11996 阅读(26) 评论(0) 推荐(0) 编辑
摘要: React-Router基本了解 对于React-Router是针对React定义的路由库,用于将URL和component进行匹配。 React-Router源码分析 简单前端路由的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" 阅读全文
posted @ 2022-10-10 10:03 beifeng11996 阅读(43) 评论(0) 推荐(0) 编辑
摘要: 一、写一个时钟 用 react 写一个每秒都可以更新一次的时钟 import React from 'react' import ReactDOM from 'react-dom' function tick() { let ele = <h1>{ new Date().toLocaleTimeSt 阅读全文
posted @ 2022-10-06 09:20 beifeng11996 阅读(15) 评论(0) 推荐(0) 编辑
摘要: 先来几个术语: | 官方 | 我的说法 | 对应代码 | | | | | | React element | React元素 | let element=<span>A爆了</span> | | Component | 组件 | class App extends React.Component { 阅读全文
posted @ 2022-10-06 09:13 beifeng11996 阅读(26) 评论(0) 推荐(0) 编辑
摘要: Hook 简介 Hook出世之前React存在的问题 在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到 store)。有一些解决此类问题的方案,比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构,这可能会很麻烦,使 阅读全文
posted @ 2022-10-06 09:06 beifeng11996 阅读(11) 评论(0) 推荐(0) 编辑