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