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.下载mockjscnpm i -D mockjs
2.引入mockjsvar 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: 已插入到真实DOM2).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上获取的是DOM2.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
转载于:https://www.cnblogs.com/2oex/p/9569178.html
React之mockjs+sass+生命周期函数相关推荐
- react生命周期函数
在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法.通常分为以下几类: 组件加载的时候触发的函数:constructor .componentWill ...
- 七十七、React中的propTypes,defaultProps和生命周期函数
2020/11/19. 周四.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React 文 ...
- react生命周期函数_如何优雅的消灭掉react生命周期函数
开源不易,感谢你的支持,❤ star concent^_^ 序言 在react应用里,存在一个顶层组件,该组件的生命周期很长,除了人为的调用unmountComponentAtNode接口来卸载掉它和 ...
- React组件的生命周期函数
文章目录 React组件生命周期 认识生命周期 生命周期函数 不常用生命周期函数 React组件生命周期 认识生命周期 很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件 ...
- React 生命周期函数使用场景 及ajax请求 前端模拟数据
React 中的生命周期函数是很重要的. 我们在写组件的时候,组件都是继承自React.Component 的,Component内置了其他所有生命周期函数,唯独没有render 函数.因此我们在写组 ...
- React教程(五)——生命周期函数
生命周期函数,是react框架的难点内容,你要知道,每一个生命周期函数是干什么的?它们的使用场景是什么?当某一种条件下,它们有着怎样的执行顺序?每一个生命周期函数,应该注意的点是什么? react中, ...
- vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数,简介及图示
vue生命周期函数 beforeCreate (创建前) created (创建后) beforeMount (挂载前) mounted (挂载后) beforeUpdate (数据更新前) upda ...
- 再次理解react生命周期函数
在学习react的过程中,生命周期函数是一个非常核心的概念,对react生命周期函数的了解就是对react工作机制的了解.而生命周期函数对于初学者而言不好记忆,故有此文作为理解和梳理生命周期函数这个知 ...
- react 生命周期函数
定义:指在某个时刻组件会自动调用的函数 阶段: 1 Initialization : 初始化阶段 2 Mounting : 真实Dom已插入 3 Updation : 重新渲染 4 Unmountin ...
最新文章
- python【蓝桥杯vip练习题库】ALGO-142 P1103(复数运算)
- C库中没有itoa以及C++中string没有split方法的原因
- android 退出应用,如何停止服务,Android 完全退出当前应用程序的四种方法
- hdu 2255 奔小康赚大钱 KM算法
- English——限定性定语从句与非限定性定语从句(二)
- 计算机加域成灰色,高手解说win7系统创建域选项变成灰色的具体教程
- 智能优化算法:鲸鱼优化算法-附代码
- Ubuntu磁盘分区和挂载
- 思科c系列服务器cimc密码,UCS C系列服务器故障排除提示.PDF
- 警察规范执法案例_警察改革沉浸式技术可以改变执法方式
- 如何使用互联网思维,解决流浪动物问题
- 429. N-ary Tree Level Order Traversal**
- 新西兰正式提高购房首付比例
- 新年腾讯云优惠券买300减可以优惠40啊领取一个官方优惠券就可以了
- 锂离子蓄电池充电方法
- 推荐两个实用的视频解析工具
- 记账本记录日常收支 如何查看某个时间段的明细
- 为什么3Dmax渲染出来是全黑的?
- 开发者选项 Disable HW overlays
- 谈谈个人对 TDD (测试驱动开发) 的理解