- 博客(22)
- 收藏
- 关注
RSS订阅原创 React -- redux-thunk的简单使用
为什么要使用redux-thunk, 因为我们想把像ajax请求的异步操作不放在声明周期函函数里面, 便于管理。使用redux-thunk中间件，我们可以在action构造器中返回一个函数，而不是一个对象。export const initStateAction = (data) => ({ type: INIT_LIST_ACTION, data})expo...
2018-11-29 13:35:31
3037
原创 Redux - Unhandled Rejection (Error): You may not call store.getState() while the reducer is executin
Unhandled Rejection (Error): You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of r...
2018-11-29 09:23:17
3191
2
原创 React - visual dom
假如react底层没有虚拟dom，那么如何处理state props变化，而重新render了？我对上面进行一下改进下面这个算法比第一个要好一点，但是还是非常好性能，所以react提出了虚拟dom概念虚拟dom就是一个js对象 为什么要提出虚拟dom,因为我们就是想把对dom的操作（非常消耗性能）变成对js对象的操作（低消耗）。减少了对dom的创建和对dom的比...
2018-11-27 16:52:32
175
原创 React - React-Router的简单介绍
Router中文意思是路由，以前多见于后端，现如今前端也有自己的路由。为什么要使用路由？1：单页页面实现页面的切换2：可以通过URL对页面进行定位3：语义化组织资源 Router路由实现的基本结构首先是路由的定义，我们通过配置文件，或者React-Router的标记来定义路由，这些我们定义好的路由被React-Router解析，然后将对应的组件render出来，...
2018-11-23 15:30:34
3269
原创 React - 在React中简单应用Redux
Redux引入Redux就是为了方便管理状态，那么在React代码中如何使用了。换句话说就是如何使用storea里面维护的state，然后在react中如何产生action,用于更新state。我们需要用的一个connect函数。具体看代码import React from "react";import ReactDOM from "react-dom";import {...
2018-11-22 21:16:42
161
原创 React - 简单理解Redux的action reducer store
什么是store，如图这就是一个store,我们可以看到由dispatcher reducer state构成，不难发现store其实是一个虚拟概念。dispatcher是一个函数，用于广播action,将action传给所有的reducer，reducer然后处理它，对state进行更新reducer是一个函数，用于通过action对state进行更新state是一个对象，...
2018-11-22 14:22:23
1242
原创 React - Context的简单使用
Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式，而不必通过组件树的每个层级显式地传递 ...
2018-11-21 21:43:58
643
原创 React - 函数作为子组件
函数作为子组件也是React的一种设计模式，和高级组件一样，仅仅是一种设计模式。这种模式如何工作的了？举个栗子这是三个按钮，我可以选择其中的一个，然后下方可以显示你的颜色。这个如何用函数作为子组件解决了？const options = [ { name: 'Red', val: 'red' }, { name: 'Orange', val: 'or...
2018-11-21 13:15:05
551
原创 React - 高级组件的简单应用
高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式。具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。举个栗子比如我们需要在input标签下面加上一个计时器。你可以写一个组件Time然后使用它，但是这很死板。比如这个Time中没有“下午”，或者说它含有你不想要的其他部分，不是很灵活...
2018-11-20 21:08:43
445
原创 React - Virtual Dom
详情看官网：协调（Reconciliation）别人的demo演示：Demo记得打开控制台看输出！！！一句话，记得在各个兄弟相同类型的节点上面设置key属性，这样react才能高效处理它们。...
2018-11-20 17:56:55
115
原创 React - getSnapshotBeforeUpdate() 的使用
getSnapshotBeforeUpdate（） 方法1：在render之前调用，state已更新 2：典型场景：获取render之前的dom状态我们来看一个例子，每一秒钟都会加入一个新的<div>msg : number</div>假如我们使用滑轮移到某个地方，内容物会随着时间不断下降，因为新生成的div会把它挤下来，如何保持不动了？<...
2018-11-20 17:43:24
25886
11
转载 JavaScript - JavaScript设计模式：工厂模式
转载博主：文章深入浅出1 什么是工厂模式?工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。如果只接触过JavaScript这门语言的的人可能会对抽象这个词的概念有点模糊，因为JavaScript一直将abstract作为保留字而没...
2018-11-16 22:18:48
139
原创 JavaScript -- 几种常见的内部排序算法的JavaScript描述
对计算机中存储的数据执行的两种最常见操作是排序和检索，自从计算机产业伊始便是如此。这也意味着排序和检索在计算机科学中是被研究得最多的操作。在面试当中，排序算法也是问的比较多的一方面。无论你是前端还是后台，学习算法知识，是IT工程师是必修课，苦行课。我们要做探索者，不能只会用黑盒子（sort()函数），就像国家一直想做出国产芯片一样，自己明白原理是最好的。提示：以下排序算法均按照从小到大...
2018-11-13 20:54:52
178
原创 JavaScript -- 二叉查找树的JavaScript的描述
我首先看一下什么是树。树是计算机科学中经常用到的一种数据结构。树是一种非线性的数据结构，以分层的方式存储数据。树被用来存储具有层级关系的数据，比如文件系统中的文件；这是一颗普通的树。二叉树是一种特殊的树，它的子节点个数不超过两个。二叉树有许多优秀的性质。二叉排序树（Binary Sort Tree），又称二叉查找树（Binary Search Tree），亦称二叉搜索树。二...
2018-11-11 20:38:06
213
原创 JavaScript -- 散列表（Hash table，也叫哈希表）的JavaScript的描述
散列是一种常用的数据存储技术，散列后的数据可以快速地插入或取用。散列使用的数据结构叫做散列表。我们的散列表是基于数组进行设计的。数组的长度是预先设定的，如有需要，可以随时增加。所有元素根据和该元素对应的键，保存在数组的特定位置，该键和我们前面讲到的字典中的键是类似的概念。使用散列表存储数据时，通过一个散列函数将键映射为一个数字，这个数字的范围是 0 到散列表的长度。对数组大小常见的限制是：...
2018-11-11 12:13:29
483
原创 JavaScript -- 双链表的JavaScript描述
尽管从链表的头节点遍历到尾节点很简单，但反过来，从后向前遍历则没那么简单。通过给 Node 对象增加一个属性，该属性存储指向前驱节点的链接，这样就容易多了。此时向链表插入一个节点需要更多的工作，我们需要指出该节点正确的前驱和后继。但是在从链表中删除节点时，效率提高了，不需要再查找待删除节点的前驱节点了。我们可以定义个数据结构用来表示每一个节点。let Node = function ...
2018-11-10 21:00:05
99
原创 JavaScript -- 链表的JavaScript描述
链表是由一组节点组成的集合。每个节点都使用一个对象的引用指向它的后继。指向另一个节点的引用叫做链。看下图：header节点不存数据，我每一次就从头开始遍历节点，拿到头就拿到整条链表。我们可以定义个数据结构用来表示每一个节点。let Node = function (element) { this.element = element;//数据域 this.nex...
2018-11-10 19:47:23
170
原创 JavaScript -- window.load添加事件
let addLoadEvent = function (func) { let oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function () {...
2018-11-09 12:47:37
2301
原创 JavaScript - 利用socket.io.js来实现一个简单的聊天室
socket.io.js是对WebSocket的封装。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服...
2018-11-03 08:27:26
6332
11
原创 css3 - 如何给图片增加内阴影
如何给图片增加内阴影？如果你想给图片加入box-shadow属性，你可以先试试。我们可以在img外面套一层div，给·div属性加box-shadow是可以的，但是仅仅这样是不可以的，因为图片比内阴影层级高会覆盖它，所以我们应该修改z-index属性<div class='box-shadow'> <img src='https://image.zhangxin...
2018-11-02 15:48:04
5732
2
原创 css3 - background-color 和background-iamge 的显示范围变化
CSS2元素背景的显示范围与CSS2.1、CSS3并不相同。在CSS2中，背景的显示范围是指内部补白（padding)之内的范围，不包括边框；而在CSS2.1至CSS3中，背景在格个盒模型中，它是布满整个元素的盒子区域的，并不是从内部补白（padding)开始，只不过边框部分遮住了部分background、但有一点需要注意，当元素的background-repeat为no-repeat时，...
2018-11-02 15:36:35
1221
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人