熟悉React的朋友都知道,React支持jsx语法,我们可以直接将HTML代码写到JS中间,然后渲染到页面上,我们写的HTML如果有更新的话,React还有虚拟DOM的对比,只更新变化的部分,而不重新渲染整个页面,大大提高渲染效率.到了16.x,React更是使用了一个被称为Fiber的架构,提升了用户体验,同时还引入了hooks等特性.那隐藏在React背后的原理是怎样的呢,Fiber和hooks又是怎么实现的呢?本文会从jsx入手,手写一个简易版的React,从而深入理解React的原理.…

好久没有静下心来写点东西了,最近好像又回到了高中时候的状态,休息不好,无法全心学习,恶性循环,现在终于调整的好一点了,听着纯音乐突然非常伤感,那些曾经快乐的大学时光啊,突然又慢慢的一下子出现在了眼前,不知道我大学的那些小伙伴们现在都怎么样了,考研的刚刚希望他考上,实习的菜头希望他早日脱离苦海,小瑞哥希望他早日出成果,范爷熊健研究生一定要过的开心啊!天哥也哥早日结婚领证!那些回不去的曾经的快乐的时光,你们都还好吗! 最近开始接触Tensorflow,可能是论文里用的是这个框架吧,其实我还是觉得py…

这篇文章继续前面的Koa源码系列,这个系列已经有两篇文章了: 第一篇讲解了Koa的核心架构和源码:手写Koa.js源码 第二篇讲解了@koa/router的架构和源码:手写@koa/router源码 本文会接着讲一个常用的中间件----koa-static,这个中间件是用来搭建静态服务器的. 其实在我之前使用Node.js原生API写一个web服务器已经讲过怎么返回一个静态文件了,代码虽然比较丑,基本流程还是差不多的: 通过请求路径取出正确的文件地址 通过地址获取对应的文件 使用Node.js的…

上篇文章我们给出了用paddlepaddle来做手写数字识别的示例,并对网络结构进行到了调整,提高了识别的精度.有的同学表示不是很理解原理,为什么传统的机器学习算法,简单的神经网络(如多层感知机)都可以识别手写数字,我们要采用卷积神经网络CNN来进行别呢?CNN到底是怎么识别的?用CNN有哪些优势呢?我们下面就来简单分析一下.在讲CNN之前,为避免完全零基础的人看不懂后面的讲解,我们先简单回顾一下传统的神经网络的基本知识. 神经网络的预备知识      为什么要用神经网络? 特征提取的高效性.…

一.前言 本文基于 https://pomb.us/build-your-own-react/ 实现简单版 React. 本文学习思路来自 卡颂-b站-React源码,你在第几层. 模拟的版本为 React 16.8. 将实现以下功能: createElement(虚拟 DOM): render: 可中断渲染: Fibers: Render and Commit Phases : 协调(Diff 算法): 函数组件: hooks: 下面上正餐,请继续阅读. 二.准备 1. React Demo…

1.首先创建createElement函数 1 function createElement ( 2 type, 3 config, 4 ...children 5 ) { 6 7 const props = { 8 ...config, 9 children: children.map(child => typeof child === 'object' ? child : createTextNode(child)) 10 } 11 12 return { 13 type, 14 props…

@ 目录 一.前言 二.介绍 2.1 创建action 2.2 reducer 2.3 触发action 三. 认识与手写createAction() 3.1 用法 3.2 原理实现 四.认识handleActions 五.认识与手写实现handleAction 5.1 用法 5.2 原理实现 六.handleActions原理实现 最后 参考文章 一.前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理redux的时候引入了它. 发现也确实…

1 算法概述 1.1 优劣 优点:进度高,对异常值不敏感,无数据输入假定 缺点:计算复杂度高,空间复杂度高 应用:主要用于文本分类,相似推荐 适用数据范围:数值型和标称型 1.2 算法伪代码 (1)计算已知类别数据集中的点与当前点的距离 (2)按照距离递增次序排序,选取与当前点距离最小的 k 个点 (3)确定前 k 个点所在类别的出现频率 (4)返回前 k 个点出现频率最高的类别作为当前点的预测分类 2 手写识别 2.1 概念 指在手写设备上书写时产生的轨迹信息转化为具体字码,本篇博客重点非搭建…

手写Java HashMap核心源码 上一章手写LinkedList核心源码,本章我们来手写Java HashMap的核心源码. 我们来先了解一下HashMap的原理.HashMap 字面意思 hash + map,map是映射的意思,HashMap就是用hash进行映射的意思.不明白?没关系.我们来具体讲解一下HashMap的原理. HashMap 使用分析 //1 存 HashMap<String,String> map = new HashMap<>(); map.put(&…

缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,…

简介: 手写实现redux基础api createStore( )和store相关方法 api回顾: createStore(reducer, [preloadedState], enhancer) 创建一个 Redux store 来以存放应用中所有的 state reducer (Function): 接收两个参数,当前的 state 树/要处理的 action,返回新的 state 树 preloadedState: 初始时的 state enhancer (Function): stor…

作者:Maxim Koretskyi 译文:Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/ React 是一个用于构建用户交互界面的 JavaScript 库,其核心机制就是跟踪组件的状态变化,并将更新的状态映射到到新的界面.在 React 中,我们将此过程称之为协调.我们调用setState方法来改变状态,而框架本身会去检查state或 p…

Redux可是一个大名鼎鼎的库,很多地方都在用,我也用了几年了,今天这篇文章就是自己来实现一个Redux,以便于深入理解他的原理.我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码的NPM包,但是功能保持不变.本文只会实现Redux的核心库,跟其他库的配合使用,比如React-Redux准备后面单独写一篇文章来讲.有时候我们过于关注使用,只记住了各种使用方式,反而忽略了他们的核心原理,但是如果我们想真正的提高技术,最好还是一个一个搞清楚,比如Redux和React-Redux…

所谓虚拟DOM就是用js对象来描述真实DOM,它相对于原生DOM更加轻量,因为真正的DOM对象附带有非常多的属性,另外配合虚拟DOM的diff算法,能以最少的操作来更新DOM,除此之外,也能让Vue和React之类的框架支持除浏览器之外的其他平台,本文会参考知名的snabbdom库来手写一个简易版的,配合图片示例一步步完成代码,一定让你彻底理解虚拟DOM的patch及diff算法. 创建虚拟DOM对象 虚拟DOM(下文称VNode)就是使用js的普通对象来描述DOM的类型.属性.子元素等信息,一…

这两天看了Lenet的模型理解,很简单的手写数字CNN网络,90年代美国用它来识别钞票,准确率还是很高的,所以它也是一个很经典的模型.而且学习这个模型也有助于我们理解更大的网络比如Imagenet等等. 我这里主要是对网络配置文件做了相关注释,没时间解释了,上车:http://pan.baidu.com/s/1jH4HbCy  ,密码:5gkn 参考博客:http://blog.csdn.net/bea_tree/article/details/51601197 现在来大致说一下Lenet的结构…

关于Binder,我就不解释的太多了,网上一搜资料一堆,但是估计还是很多人理解的有困难.今天就教你如何从 app层面来理解好Binder. 其实就从我们普通app开发者的角度来看,仅仅对于android应用层的话,Binder就是客户端和服务端进行通信的媒介. AIDL就是我们理解Binder 最好的事例. 我们都知道 我们写好aidl 文件以后,开发工具 会自动帮我们生成好代码.实际上 我们最终apk里面 是只有这些代码的,我们写的aidl文件 是不会被打包进去的,也就是说aidl文件 实际上…

原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-01-05/27.html 作者:夜月归途 出处:http://www.guitu18.com/ 本博客中未标明转载的文章归作者夜月归途和博客园所有. 欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 本博客关于Java动态代理相关内容直达链接: JDK动态代理浅析 Cglib动态代理浅析 JDK动态代理深入理解分析并手写简…

原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-01-03/27.html 作者:夜月归途 出处:http://www.guitu18.com/ 本博客中未标明转载的文章归作者夜月归途和博客园所有. 欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 本博客关于Java动态代理相关内容直达链接: JDK动态代理浅析 Cglib动态代理浅析 JDK动态代理深入理解分析并手写简…

前言 事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败.事务具有4个特性:Atomicity(原子性),Consistency(一致性),Isolation(隔离性),Durability(持久性).在实际开发中,我们对事务应用最多就是在数据库操作这一环,特别是Spring对数据库事务进行了封装管理.Spring对事务的支持,确实很强大,但是从本质上来讲:事务是否生效取决数据库底层是否支持(比如MySQL的MyISAM引擎就不支持事务,Spring能奈何!),同时一…

前言 事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败.事务具有4个特性:Atomicity(原子性),Consistency(一致性),Isolation(隔离性),Durability(持久性).在实际开发中,我们对事务应用最多就是在数据库操作这一环,特别是Spring对数据库事务进行了封装管理.Spring对事务的支持,确实很强大,但是从本质上来讲:事务是否生效取决数据库底层是否支持(比如MySQL的MyISAM引擎就不支持事务,Spring能奈何!),同时一…

首先,关于神经网络,其实是一个结合很多知识点的一个算法,关于cnn(积卷神经网络)大家需要了解: 下面给出我之前总结的这两个知识点(基于吴恩达的机器学习) 代价函数: 代价函数 代价函数(Cost Function )是定义在整个训练集上的,是所有样本误差的平均,也就是损失函数的平均. 具体的了解请看我的博客: https://blog.csdn.net/qq_40594554/article/details/97389489 梯度下降: 梯度下降一般讲解采用单变量梯度下降,但是一般在程序中常用…

在我们的日常工作中,经常会用到Spring.Spring Boot.Spring Cloud.Struts.Mybatis.Hibernate等开源框架,有了这些框架的诞生,平时的开发工作量也是变得越来越轻松,我们用 Spring Boot 分分钟可以新建一个Web项目. 记得自己刚开始工作的时候还是在用Servlet写Web项目,自己写数据库连接池,用原生JDBC操作数据库,好了不发散了.回到这篇文章的主题,今天通过手写Spring框架,帮大家深入了解一下Spring的工作机制,文中涉及的代码…

softmax函数的作用   对于分类方面,softmax函数的作用是从样本值计算得到该样本属于各个类别的概率大小.例如手写数字识别,softmax模型从给定的手写体图片像素值得出这张图片为数字0~9的概率值,这些概率值之和为1.预测的结果取最大的概率表示的数字作为这张图片的分类. 可以从下面这张图理解softmax x1,x2,x3代表输入的值,b1,b2,b3代表类别1,2,3的偏置量,是因为输入的值可能存在无关的干扰量. 将上图写成等式 \[ \left[\begin{matrix}tem…

前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建SpringMVC的最小系统,所谓最小系统,就是足以使项目在SpringMVC框架下成功跑起来,并且能够做一些简单的事情(比如访问页面)的系统. 在开始之前,想提几个问题让大家思考一下: 为什么要手写SpringMVC? 如何手写一个SpringMVC? 手写的SpringMVC真的可以跑起来吗? 让…

上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库.这个库的作用是将Redux的状态机和React的UI呈现绑定在一起,当你dispatch action改变state的时候,会自动更新页面.本文还是从它的基本使用入手来自己写一个React-Redux,然后替换官方的NPM库,并保持功能一致. 本文全部代码已经上传GitHub,大家可以拿下来玩玩:…

注意:只有类组件才有生命周期钩子函数,函数组件没有生命周期钩子函数. 生命周期 装载阶段:constructor() render() componentDidMount() 更新阶段:render() componentDidupDate() 卸载阶段:componentWillUnmount() (面试题)shouldComponentUpdate() 返回true时,正常进入更新阶段,返回false时,不进入更新阶段. this.$forceUpdate()这个方法调用,会绕过should…

手写自己的call,我们要先通过call的使用,了解都需要完成些什么功能? call()进行了调用,是个方法,已知是建立在原型上的,使用了多个参数(绑定的对象+传递的参数). 我们把手写的函数起名为myCall,obj作为形参承载传过来的第一个参数(即绑定的对象). Function.prototype.myCall = function(obj){} call的调用对this的指向进行了改变,而this是函数,这是前提(对this进行判断). Funtion.prototype.myCall…

上一篇文章我们分析了Redux-Thunk的源码,可以看到他的代码非常简单,只是让dispatch可以处理函数类型的action,其作者也承认对于复杂场景,Redux-Thunk并不适用,还推荐了Redux-Saga来处理复杂副作用.本文要讲的就是Redux-Saga,这个也是我在实际工作中使用最多的Redux异步解决方案.Redux-Saga比Redux-Thunk复杂得多,而且他整个异步流程都使用Generator来处理,Generator也是我们这篇文章的前置知识,如果你对Generato…

React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,…

手写useState与useEffect useState与useEffect是驱动React hooks运行的基础,useState用于管理状态,useEffect用以处理副作用,通过手写简单的useState与useEffect来理解其运行原理. useState 一个简单的useState的使用如下. // App.tsx import { useState } from "react"; import "./styles.css"; export defau…