Tomorrow

我学了多少技术 读了多少本书

React16:Memo组件

React16:memo组件,为函数式组件锦上添花

Memo组件 Memo组件是一个高阶函数,它可以将函数组件转换成类似于PureCmponent组件。 我们都知道PureComponent是一个带有shouldComponentUpdate优化的组件,纯函数组件是无法写生命周期的,对于一些相应的优化无法左右,比如就是shouldComponentUpdate钩子函数优化,Memo可以提供这种方式,把纯函数组件改成带有优化的类似Pureom...

React16:按需加载和异步组件

React16按需加载组件和异步组件

按需加载 随着前端工程化的发展,我们更倾向于使用自动化构建工具构建项目,构建工具可以完全使用模块化的方式完成项目的构建,便于维护和开发。我们在使用自动化构建工具通常会把代码打包到一个文件中去main.js,这样的好处在与当请求网页只需要加载这一个文件就可以展示整个应用。但是,随着网页功能的不断扩展和项目的不断增大,这反而带来了网页加载速度慢、交互卡顿的问题。原因是整个应用都在一个文件里面导致...

React16:组件插槽

React16组件插槽使用方式

什么是插槽??? 插槽就是事先定一个容器,当组件渲染的时候把子组件渲染到事先定义的容器里面。 React提供了一个顶级方法ReactDom.createPortal(),使我们有能力把一个子组件渲染到特定的DOM元素中去。 使用插槽 首先要创建一个插槽容器,容器是单纯的html。 const portalElm = document.createElement("div"); docum...

React高阶组件

React高阶组件探秘

什么是高阶函数 函数是一等公民 函数是一等公民的意思是:函数和其他数据类型是一样的,函数既可以保存在数组中又可以保存在对象中,函数也可以向其他数据类型一样作为另一个函数的参数,和其他数据类型处于同等地位。 那么什么是高阶函数? 当一个函数接受一个函数作为参数,经过一系列处理之后再返回一个函数,这样的函数叫做高阶函数。 高阶函数可以说是函数的增强剂,传入一个函数,返回增强后的函数...

数据的不可变性

React中使用数据的不可变性

不可变性 上个文章中有提到,当数据改变后是一新的对象和原本的对象没有关系,不就可以比较了。这种方式有两种实现方式。 Clone 克隆分为浅克隆和深克隆: 浅克隆:只是把对象的第一层属性克隆下来,如果内部有对象或者数组的话则不会再继续克隆。 深克隆:深度克隆一个对象,如果一个对象内部还有一个对象的话,则继续克隆。深度克隆除了值相同其他没有任何联系。 对于PureComponen...

React三种常用组件

React中三种常用的组件

React核心就是组件,基本上是处处即组件。 类组件 类组件是最基本的组件,同时也是写的最多的组件。 import React ,{Component} from "react"; class Greeting extends Component{ constructor(props){ super(props); this.state = {co...

React16:render函数的多种返回值

React16新增render函数的返回值

在React16之前,类组件的render函数和函数组件的返回值是有限制的,只能返回html和自定义组件,并且如果返回多行Dom的话必须在外层加入一个根元素包裹起来。React16出现之后在render函数返回值上发生了很大的变化,让我们在写React代码过程中更顺滑。 string React16问世之后,render函数可以返回一串String,渲染的时候直接渲染到视图中。 rende...

如何在IE8以下实现数据的双向绑定

在ie6下实现数据双向绑定方法

Object.defineProperty 我们都知道Vue是使用Object.defineProperty来实现的数据双向绑定。我们先来实现一下数据的双向绑定。 var obj = {}; var a; Object.defineProperty(obj,'a',{ get: function(){ console.log('get val'); r...

学习MutationObserver

原生API-MutationObserver观察者

MutationObserver Mutation Observer API 用来监视DOM变动。DOM的任何变动,比如节点的增删、属性的变动、文本内容的变化,这个API都可以得到通知。 首先这个API归属于微任务,也就是说是异步的,这样设计也是为了应付Dom变动频繁的特点,防止频繁变动占用js执行栈造成页面卡顿。比如说:如果不是异步当DOM变动触发观察者的回调函数执行,就会堵塞后续代码的...

MessageChannel消息频道

学习MessageChannel消息频道

MessageChannel MessageChannel可以实现一个通讯机制,允许我们创建一个新的消息通道。它是一个构造函数。 实例化 const channel = new MessageChannel(); console.log(channel); 实例化对象上有两个MessagePort对,象并且这两个对象是只读的。这两个对象间可以相同通信。例如: const channel...