jsonbro-CSDN博客

原创 React diff算法

1. 关于diff算法1.1 什么是diff算法 diff算法即差异查找算法。1.2 diff算法的作用计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。1.3 传统diff算法通过循环递归对节点进行依次对比，算法复杂度达到O(n^3)，n是树的节点数，效率极其低下。如果要展示1000个节点，要进行上亿次比较。现在的CPU每秒能执...

2021-08-15 22:13:41 363

原创 React数据流

React是单向数据流的js框架，即数据只会朝一个方向流动，由父组件到子组件进行传递和更新。React的核心思想就是UI = Render(data)，data就是数据，Render()是React提供的纯函数，所以用户界面的展示完全取决于数据。...

2021-07-21 07:51:23 866

1. 前言在Web开发的过程中，路由的使用是必不可少的。路由就是URL到相应处理程序的映射关系。用户在输入要访问的url后，路由会解析url中的路径，然后根据映射关系查找相应的处理函数。前端路由不同于传统路由，它不需要服务器来进行解析，而是通过浏览器的location.hash或H5中的History API来实现的。在开发时，路由用来设定访问路径，并将路径与相应的组件映射起来，用户在访问相应的路径时，路由根据映射关系实现不同组件间的切换，整个过程都是在一个html页面中进行的，不涉及页面的跳转，也

2021-04-19 22:07:29 741

原创详解并手动实现观察者模式、发布订阅模式

1：背景设计模式的定义是：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说，设计模式是在某种场合下对某个问题的一种解决方案。如果再通俗一点说，设计模式就是给面向对象软件开发中的一些好的设计取个名字。这些“好的设计”并不是谁发明的，而是早已存在于软件开发中。一个稍有经验的程序员也许在不知不觉中数次使用过这些设计模式。GoF（Gang of Four--四人组，《设计模式》几位作者）最大的功绩是把这些“好的设计”从浩瀚的面向对象世界中挑选出来，并且给予它们一个好听又好记的名字。

2021-04-11 22:19:02 264

原创详解React.memo、useMemo、useCallback

1：前言最近开发中使用到了这几个API，这几个API不经常用，刚看到的时候理解也有点模糊，于是网上找了一些讲解并自己动手做了些实验，算是搞明白了。本文主要讲解React.memo、useMemo、useCallback的知识。2：React.memoReact.memo为高阶组件。如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染..

2021-04-10 21:37:40 915

原创手动实现Promise--进阶版，finally和catch

1. 前言接上文。上文已经实现了基础版的Promise，但是Promise还有几个常用的方法，如：finally、catch。这篇文章具体讲一下这两个方法的实现。2. 实现2.1 认识catchcatch()方法是.then(null, rejection) 或 .then(undefined, rejection)方法的别名，用于指定发生错误时的回调函数。<!DOCTYPE html><html lang="en"><head> .

2021-04-07 22:23:41 330

原创手动实现Promise--基础版

1.前言Promise是ES6发布的异步编程的一种解决方案。比传统的解决方案--回调函数和事件，更加合理和强大。它有社区提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。本文详细讲一下怎么手动实现一个Promise。阅读前请确保已经熟练使用Promise，要不会有些费劲。本文较长，如想看懂请耐心，建议边看边自己写一遍。原生Promise请看文档：Promise。2.实现...

2021-04-05 23:09:41 529 1

程序员界科比的博客