React之mockjs+sass+生命周期函数-CSDN博客

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

转载于:https://www.cnblogs.com/2oex/p/9569178.html