- 博客(6)
- 收藏
- 关注
RSS订阅原创 react 学习 - 4 react-transition-group 插件
在 react 里，有个专门的库是用来处理动画的，那就是 react-transition-group import React, { Component, Fragment } from "react"; import { CSSTransition } from "react-transition-group"; // 引入组件 import "./style.css"; class Tra...
2020-03-14 20:25:19
180
原创 react 学习 - 3. 生命周期
react 中的生命周期是指，在某一个时刻组件会自动调用执行的函数。 constructor 此函数会在组件创建的时候调用，初始化整个 component，只会执行一次。 componentWillMount 即将废弃 此函数会在组件挂载前触发。 componentsDidMounte 组件在挂载完成后触发，只会执行一次。 shouldComponentUpdate 组件在更新前触发，需要返回...
2020-03-14 19:24:07
99
原创 react 学习 - 2. ref
在 react 中，虚拟 DOM 节点的获取是通过 ref 来获取的。 <input value={this.state.value} onChange={this.changeInput.bind(this)} ref={(input)=>{this.input=input}} /> changeInput(e) { console.log(e.targ...
2020-03-14 16:58:50
91
原创 react 学习 - 1. 虚拟 DOM
在 react 中，页面的构建需要进行七个步骤： 1. 获取 state 数据 2. 获取 JSX 模板 3. 数据 + 模板 生成虚拟 DOM 树 4. 根据虚拟 DOM 树创建真实的 DOM 5. 监听 state 数据变化 6. 数据 + 模板 生成新的 DOM 树，与旧的模板比对其中的差异 7. 操作 DOM，改变 DOM 内容 在此过程中可以实现数据与页面的同步刷新。 ...
2020-03-14 16:30:11
78
原创 js 设计模式 - 工厂模式
js 设计模式 - 工厂模式 在一些情况下，我们需要构造函数来批量的生产一些对象来供我们使用，这时候就需要用到工厂模式。 var Shiba = function(){ this.name = '柴犬' this.char = '呆萌' } var Husky = function(){ this.name = '哈士奇' this.char = '傻狗' } ...
2020-03-10 10:29:13
91
原创 js 设计模式 - 单例模式
设计模式 - 单例模式 在一些场景下，我们会碰到一些比较棘手的对象（如只允许出现一个弹窗，只允许有一个领导）等。这个时候就需要使用单例模式 var Dog = function(name) { this.name = name this._instance = null } Dog.createDog = function(newName) { if(this._instance){ ...
2020-03-10 10:09:54
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人