React之mockjs+sass+生命周期函数
mdn W3C标准网站
运行sass
cnpm i -D node-sass-chokidar npm-run-all
rem单位设置
<script>
//rem单位设置
document.documentElement.style.fontSize = (window.innerWidth)/750 * 100 + 'px';
</script>
mock数据
1.下载mockjs
cnpm i -D mockjs
2.引入mockjs
var Mock = require('mockjs');
var fs = require('fs');
3.给出随机数据
Mock.Random.extend({
title:()=>Mock.Random.pick([1,2,3,4,5,6,7,8,9])
})
4.随机数据结果
var data = Mock.mock({
'arr|1-20':[{
'id|+1':1,
'title':'@title'
}]
})
5.写入文件data.json
fs.writeFile('./data.json',JSON.stringify(data),()=>{})
// 即出来相应的JSON数据
React 组件生命周期
1.组件的生命周期可分为三个状态:
1).Mounting: 已插入到真实DOM
2).Updating:正在被重新渲染
3).Unmounting:已移出真实DOM
2.生命周期的方法有:
1)componentWillMount 在渲染前调用,在客户端,也在服务端
2)componentDidMount:在第一次渲染后调用,只在客户端
//之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
3)componentWillReceiveProps在组件接收到一个新的prop(更新后)时被调用。这个方法在初始化render时不会被调用。
4)shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
5)componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
6)componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
7)componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
8)ReactDOM.unmountComponentAtNode(document.getElementById('root'))
// 组件初始化的时候 created
constructor(props) {
super(props)
}
// 组件挂载之前 beforeMount
componentWillMount() {
}
// 组件挂载完成 mounted
componentDidMount() {
}
// 组件将要接收新的props Vue没有的
// 执行完成之后,this.props指向新的props
// 唯一一个和props相关的生命周期
componentWillReceiveProps(nextProps) {
// 旧的props this.props
// 新的props nextProps
}
// 通过返回值判断组件是否需要更新,用于React优化Vue没有的
// true更新,false不更新
shouldComponentUpdate(nextProps, nextState) {
// 旧的props this.props
// 新的props nextProps
// 旧的state this.state
// 新的state nextState
}
// 组件将要更新 beforeUpdate
componentWillUpdate(nextProps, nextState) {
}
// 组件更新完成 Updated
componentDidUpdate(prevProps, prevState) {
}
// 组件将要卸载
componentWillUnmount() {
}
卸载组件
1.挂载到Dom上时
ReactDom.unMountComponentAtNode(节点)
2.挂载在一个节点上
不渲染,等于null即可
组件
容器组件 有state数据管理
视图组件 没有state(class或函数)
// 函数(props通过函数的参数接收)
(props)=>{
}
ReactDOM.render()渲染组件时返回的是组件实例;
而渲染dom元素时,返回是具体的dom节点
this.refs 和 ReactDOM.findDOMNode区别
this.refs 获得的是虚拟DOM,而ReactDOM.findDOMNode 获得的是实际DOM。
1.ref添加到Compoennt上获取的是Compoennt实例,添加到原生HTML上获取的是DOM
2.ReactDOM.findDOMNode,当参数是DOM,返回值就是该DOM;当参数是Component获取的是该Component render方法中的DOM
refs vue中获取ref this.$refs.input
react获取ref
this.refs.input.value
<input type='text' ref='input'/>
生命周期阶段
实例化时期
react组件在实例化时会依次调用如下组件方法:
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
存在期
当react组件被实例化后,用户的一些操作会导致组件状态的更新,此时如下方法将依次被调用:
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁时期
在组件销毁的时候,会调用如下组件方法:
componentWillUnmount
React之mockjs+sass+生命周期函数的更多相关文章
- react父子组件各自生命周期函数加载的先后顺序
理解记忆总结: 父组件即将挂载(最外层的父组件都还没准备进入,其内部的子组件当然更没进入了) -> 子组件即将挂载 -> 子组件挂载完成(父内部都没完成,父当然不能算完成) -> ...
- React的生命周期函数
概述 在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor 在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6 ...
- React——组件的生命周期函数
每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...
- React 学习(四) ---- 生命周期函数
现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变 ...
- React生命周期函数详解
React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...
- react生命周期函数使用箭头函数,导致mobx-react问题
最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...
- React组件详细介绍及其生命周期函数
组件的详细说明 通过Reac.createClass({...})创建组件的时候,应该有一个render()方法,也可以在其中添加生命周期函数. render方法 当调用该方法的时候,会检测this. ...
- React组件安装使用和生命周期函数
React安装在使用react时 需要安装 两个模块 react react-dom 初始化时 需要用到react-dom中的render方法 具体如下: import ReactDOM from & ...
- 2.React 生命周期函数
什么是生命周期函数:在某一时刻组件会自动调用执行的函数. import React,{ Component,Fragment } from 'react' class Note extends Com ...
随机推荐
- 绝对定位( Absolute positioning )
绝对定位( Absolute positioning ) 之前在介绍定位体系的时候,已经简单的介绍了绝对定位和固定定位.一般情况下,这两种定位的元素, 在 3D 的可视化模型中,处于浮动元素的上方,或 ...
- vue动态绑定class,tab栏
- Springboot配置注入
springboot中如何将yml 配置文件中配置,在类中注入使用 ①第一种使用@value方式 ################## 配置文件 ######################### d ...
- NSIS增加打包文件夹
File /r "F:\rainwayDemo\exploer\RailwayLinesExploer\bin64\log" File /r "models" ...
- MFC的combox禁止键盘输入
项目中有个combox的下拉窗控件,鼠标双击总能存在焦点,并且会修改combox显示的文字,网上查了好多资料,都说修改style,可是我的vs2015里没发现有style的属性,后面修改 modal ...
- C++ sizeof 运算符
sizeof 是一个关键字,它是一个编译时运算符,用于判断变量或数据类型的字节大小. sizeof 运算符可用于获取类.结构.共用体和其他用户自定义数据类型的大小. 使用 sizeof 的语法如下: ...
- linux下常用命令查看端口占用
在Linux使用过程中,需要了解当前系统开放了哪些端口,并且要查看开放这些端口的具体进程和用户,可以通过netstat命令进行简单查询netstat命令各个参数说明如下: -t : 指明显示TCP端口 ...
- redis中间件
redis的集群:集群策略:主从复制(从库从主库同步获取数据,本身不提供服务)哨兵(监控主库和从库,当主库挂的时候自动把从库选一个切换为主库,主库存放的是全量数据)集群参考:https://blog. ...
- dbSNP|n SwissVar|n CanProVar|CHPP|mutation assessor|
癌症蛋白质基因组学主要研究driver性质的突变,该突变有可能是转化为癌基因的突变.抑癌基因突变.药物位点突变和蛋白突变,可以使用mutation assessor 预测突变 突变导致疾病,修饰仅影响 ...
- OpenCV 实现自己的线性滤波器
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...