react
敲奇
这个作者很懒,什么都没留下…
展开
-
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 · 190 阅读 · 0 评论 -
react 学习 - 3. 生命周期
react 中的生命周期是指,在某一个时刻组件会自动调用执行的函数。 constructor 此函数会在组件创建的时候调用,初始化整个 component,只会执行一次。 componentWillMount 即将废弃 此函数会在组件挂载前触发。 componentsDidMounte 组件在挂载完成后触发,只会执行一次。 shouldComponentUpdate 组件在更新前触发,需要返回...原创 2020-03-14 19:24:07 · 103 阅读 · 0 评论 -
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 · 96 阅读 · 0 评论 -
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 · 83 阅读 · 0 评论