Tomorrow

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

React16:新Ref的使用

React16:新Ref的使用方式及Ref传递

曾经的两种Ref的创建方式 render(){ return ( <> //第一种:第一种是指定指定一个string,通过this.refs.stringRef取到相应的dom元素 <p ref="stringRef">span1</p> //第二种:第二种是使...

React16:Context API

React16:Context API的使用

Context API是 react16中重点推荐使用的。 Context API 主要解决props向对层嵌套的子组件传递的问题(爷孙组件props传递),原理是定义一个全局对象,通过订阅发布的方式进行数据的传递。 React.crateContext Context Api使用React.crateContext方法构建,并且定义一个默认值。 const {Provider,...

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...