袁光斌的Blog

事件处理🍅🍅🍅React中事件处理函数绑定this的方法总结： 🍅🍅🍅在constructor中通过bind函数来绑定this class Toggle extends React.Component { constructor(props) { ... // 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( <button onClick={this.handleClick}></button> ); }} 🍅🍅使用public class fields ...

【锚点简介】 ​ 锚点(anchor)是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。​ 使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。​ 创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。 HTML锚点语法 建立一个跳转的连接： [说明文字](#jump) 标记要跳转到的位置 <span id="jump">跳转到这里：</span> Typora锚点语法 # titleA# titleB- [toA](#titleA)- [toB](#titleB)

本篇文章主讲构造函数、原型以及原型链，包括 Symbol 是不是构造函数、constructor 属性是否只读、prototype 、__proto__ 、[[Prototype]] 、原型链。 一、基础入门1. 对象在JS中，万物皆对象，对象又分为普通对象和函数对象，其中 Object、Function 为 JS 自带的函数对象。 let obj1 = {}; let obj2 = new Object();let obj3 = new fun1()function fun1(){}; let fun2 = function(){};let fun3 = new Function('some','console.log(some)');// JS自带的函数对象console.log(typeof Object); //function console.log(typeof Function); //function // 普通对象console.log(typeof obj1); / ...

一、instanceof1. 引入 instanceof在 JS 中，判断一个变量的类型，常常会用到 typeof 运算符，但当用 typeof 来判断引用类型变量时，无论是什么类型的变量，它都会返回 Object 。 // 基本类型console.log(typeof 100); // numberconsole.log(typeof 'bottle'); // stringconsole.log(typeof true); // boolean// 引用类型console.log(typeof {}); // objectconsole.log(typeof [1, 2, 3]); // object 为此，引入了instanceof。 instanceof 操作符用于检测对象是否属于某个 class，同时，检测过程中也会将继承关系考虑在内。 // 类class Bottle {}// bottle 是 Bottle 类的实例对象let bottle = new Bottle();console.log(bottle i ...

ES5 继承先定义一个父类 function SuperType () { // 属性 this.name = 'SuperType';}// 原型方法SuperType.prototype.sayName = function() { return this.name;}; 一、 原型链继承将父类的实例作为子类的原型 // 父类function SuperType () { this.name = 'SuperType'; // 父类属性}SuperType.prototype.sayName = function () { // 父类原型方法 return this.name;};// 子类function SubType () { this.subName = "SubType"; // 子类属性};SubType.prototype = new SuperType(); // 重写原型对象，代之以一个新类型 ...

现在越来越多的网站是动态网站，常常需要将后端数据传输给前端保存或者更新到页面中，尤其是用户偏好设置，保存在客户端不仅可以减少请求耗时，也能降低服务端的压力。 客户端（这里一般指浏览器）目前主要包括三类存储方式：cookie， Web Storage 和 IndexedDB。其中 Web Storage 又包含 Local Storage 和 Session Storage。 （现在主流浏览器还支持 Web SQL，这里暂时不做介绍…主要是不大了解） 1. cookiecookie，全名叫 HTTP cookie，是第一个客户端存储解决方案，最初用于在客户端存储回话信息。后来主要用在三个方面： 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） 个性化设置（如用户自定义设置、主题等） 浏览器行为跟踪（如跟踪分析用户行为等） 1.1 组成Cookie是一段不超过4KB的小型文本数据，主要由以下七个部分组成： Name：cookie的名称 Value：cookie的值 Path：定义该web站点上可以访问该cookie的目录（或者说路径） Expires：cook ...

前言这篇文章知识点有一点杂，包含了： 我们日常前端常用的三个内置类 Array、Function、Object，以及它们之前的关系，并用一个练习题来加深理解。 面向对象的细节知识点 hasOwnProperty、in，以及如何实现一个方法来检查属性是否是「公有属性」。 进阶知识手写 new 原理实现和细节需要注意的地方。 全文都是和面向对象有关。有兴趣的同学可以深入了解，当然这不是全部的面向对象知识点，我会在后面的文章慢慢为大家带来更多的面向对象的知识，并且如果大家觉得自己的基础比较薄弱，也看看我之前「前端基石」的文章，都是前端的基础知识。 传送门 前端基石：JS 中的9大数据类型和数据类型转换 前端基石：Stack、Heap 前端基石：函数的底层执行机制 前端基石：预处理机制，变量提升 前端基石：闭包 前端基石：高阶函数之柯里化、组合函数、惰性思想 前端基石：一段代码隐含了多少基础知识？ 前端基石：this 的几种基本情况 前端基石：构造函数和普通函数 三个常见的内置类Array Array 内置构造函数把 Array 函数作为「普通对象」，设置的「私有静态属性和方法」和 ...

本文翻译自 React.memo() vs. useMemo(): Major differences and use cases 在软件开发中，我们通常痴迷于性能提升以及如何使我们的应用程序执行得更快，从而为用户提供更好的体验。 Memoization 是优化性能的方法之一。 在本文中，我们将探讨它在 React 中的工作原理。 什么是 memoization？在解释这个概念之前，让我们先来看一个简单的斐波那契程序： function fibonacci(n){ return (n < 2) ? n : fibonacci(n-1) + fibonacci(n-2);}复制代码 显然这个算法缓慢的令人绝望，因为做了非常多的冗余计算，这个时候memoization就可以派上用场了！ 简单来说，memoization 是一个过程，它允许我们缓存递归/昂贵的函数调用的值，以便下次使用相同的参数调用函数时，返回缓存的值而不必重新计算函数。 这确保了我们的应用程序运行得更快，因为我们通过返回一个已经存储在内存中的值来避免重新执行函数需要的时间。 为什么在 Reac ...

导语： Capture Value 是 React Hooks 中很重要的细节点，本篇文章将从一个实际需求的例子出发，对 Capture Value 进行介绍。 一、从一个例子说起在 React 应用中异步需求很常见。现在有一个小需求：实现一个按钮默认显示 false，点击后立即更改为 true，两秒后变回 false。 代码如下，自己试试！ const Demo = (props) => { const [flag, setFlag] = useState(false); let timer; function handleClick() { setFlag(!flag); timer = setTimeout(() => { setFlag(!flag); }, 2000); } useEffect(() => { return () => { clearTimeout(timer) } ...

本文会先用原生JS实现一个基本的前端路由，再介绍 React Router 的源码实现，通过比较二者的实现方式，分析 React Router 实现的动机和优点。阅读完本文，读者们应该能了解： 前端路由的基本原理 React Router 的实现原理 React Router 的启发和借鉴 一. 我们应该如何实现一个前端路由一开始，我们先跳出 React Router，思考如何用原生 JavaScript 实现一个的前端路由，所谓前端路由，我们无非要实现两个功能：监听记录路由变化，匹配路由变化并渲染内容。以这两点需求作为基本脉络，我们就能大致勾勒出前端路由的形状。 路由示例: 1.Hash 实现我们都知道，前端路由一般提供两种匹配模式， hash 模式和 history 模式，二者的主要差别在于对 URL 监听部分的不同，hash 模式监听 URL 的 hash 部分，也就是 # 号后面部分的变化，对于 hash 的监听，浏览器提供了 onHashChange 事件帮助我们直接监听 hash 的变化： <body> <a href="#/ ...