手写Redux-Saga源码

上一篇文章我们分析了Redux-Thunk的源码,可以看到他的代码非常简单,只是让dispatch可以处理函数类型的action,其作者也承认对于复杂场景,Redux-Thunk并不适用,还推荐了Redux-Saga来处理复杂副作用。本文要讲的就是Redux-Saga,这个也是我在实际工作中使用最多 ... »

vue任意关系组件通信与跨组件监听状态 vue-communication

大家好!我是木瓜太香! 众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了! ... »

封装React AntD的form表单组件

form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似,所以很有必要对这些表单来一个简单的封装。其实,封装组件的... ... »

React环境搭建

React是当下前端生态圈流行的框架之一,与Vue和Angular并称前端三架马车。今天,我们就一起来学习下React,今天的主要内容有。 利用React脚手架create-react-app搭建项目 编写一个React计数组件 利用React脚手架create-react-app搭建项目 这里笔者 ... »

React-redux使用

为什么要使用react-redux 由于redux的store与组件的耦合度太高所以,我们用react官方提供的react-redux可以使两者耦合度降低,更好的实现模块化开发。 react-redux使我们使用store更加的方便简洁 如何使用 首先store,reducer, actions的创 ... »

Redux的理解与使用

一.什么是Redux? Redux是一个第三方状态管理的js库,它不仅仅可以适用于react框架,还可以用于其他的vue,auglar等框架。只不过react的生态中不包括一个状态管理的库而已,所以与react配合使用较为好。 二.神魔时候要使用Redux来管理状态 当我们多个组件共享状态的时候最好 ... »

手写一个React-Redux,玩转React的Context API

上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库。这个库的作用是将Redux的状态机和React的UI呈现绑定在一起,当你dispatch acti ... »

实现 React Hooks

实现 React Hooks UI 开发有两个问题: 展示复用 逻辑复用 展示复用目前基本使用组件化来解决,逻辑复用一直以来都没有特别好的解决方案。React 从一开始的 mixin ,到 高阶组件 以及 Render Props ,都是在试图解决这个问题,但是都引入了一些别的问题。 Mixins ... »

vue

一、包容性路由与排他性路由 1、包容性路由。多个<Route> 可以同时进行匹配和渲染,例如:如果路由有/food 和 /food/1 那么在匹配 /food 的时候两个都能匹配到。而react-router v4以后的版本就是以包容性路由为基础。例如:如果路由有/food 和 /food/1 那么 ... »

JsPlumb在react的使用方法及介绍

JsPlumb在react的使用方法及介绍 一.相关资料来源: 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/ ——— 一个翻译一半就不能打开的文档 2.https://github.com/wan ... »

深入理解React:事件机制原理

目录 序言 DOM事件流 事件捕获阶段、处于目标阶段、事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 1.序言 React 有一套自己的事件系统,其事件叫做合成事件。为什么 React 要自定义一套事 ... »

手写React的Fiber架构,深入理解其原理

熟悉React的朋友都知道,React支持jsx语法,我们可以直接将HTML代码写到JS中间,然后渲染到页面上,我们写的HTML如果有更新的话,React还有虚拟DOM的对比,只更新变化的部分,而不重新渲染整个页面,大大提高渲染效率。到了16.x,React更是使用了一个被称为Fiber的架构,提升 ... »

如何用 React 构建前端架构

早期的前端是由后端开发的,最开始的时候仅仅做展示,点一下链接跳转到另外一个页面去,渲染表单,再用Ajax的方式请求网络和后端交互,数据返回来还需要把数据渲染到DOM上。写这样的代码的确是很简单。在Web交互开始变得复杂时,一个页面往往有非常多的元素构成,像社交网络的Feed需要经常刷新,展示内容也五 ... »