----欢迎查看我的博客----

react框架

  react是目前前端比较火的框架。背景是Facebook。框架其实并不稀奇，人永远不可能追框架，因为追框架永远追不到头，但是每种框架和库都是为了解决问题，他们的思想是能改变历史的，思想很重要，和人一样有了思想才能成事。

序言

  要想练此功，不需要自宫。。兄弟别紧张，不过要把之前的思想忘记掉，这句话很重要，划重点，因为是单页，从jq过度过来你不能以jq的思想去想渲染效果，要以数据结构的方式去想，这里我就不多说了，后面的react相关文章会循序渐进的给大家讲解的。其实我们没必要把它看得很复杂，说白了框架是方便大家开发的，你会发现用框架开发模式会方便，忘记之前所有思想切记，来吧，我们先看看 react 生命周期。

生命周期

image

  react有这么东西存在学名叫生命周期，别那么高大上，说白了，就是一个react的组件（通俗讲就是页面，但是react是单页）渲染，按一定顺序执行的一些函数。简单明了一句话：按一定顺序执行的一些函数。
  你不需要知道这个执行顺序是为什么，react就是这么规定的..好，我们来看一下

首次实例化

  react会先进行一次实例化（new）,按顺序执行一些东西。

周期名称	解释
getDefaultProps	获取初始的props
getInitialState	获取初始的state
componentWillMount	组件渲染前的周期函数
render	渲染的函数，改变dom
componentDidMount	实例化完成后的更新

实例化完成后的存在期

  实例化完成后，当props或者state发生变化时，下面方法依次被调用：

周期名称	解释
componentWillReceiveProps	props发生改变使用的，我们有时候会在这个函数里做些判断然后去渲染dom
shouldComponentUpdate	字面意思，是否应该更新组件，默认返回true。当返回false时，后期函数就不会调用，组件不会在次渲染。说白了就是不会进入render
componentWillUpdate	props或者state导致组件更新重新渲染就会调用，一般很少用到
render	再次进入render渲染
componentDidUpdate	dom更新完成后调用

离开组件销毁

  离开组件也会有钩子触发。我们在这里一般用来解除一些事件的监听或者setinterval等方法。为什么呢？因为是单页应用，如果不清除很容易造成对全局的污染。

componentWillUnmount | 通过路由离开发生的钩子

结语（未完）

  生命周期告一段落。有人欢喜有人忧啊。相信没有开发经验的兄弟还是不太明白咋回事，ok咱们来个组件的代码，你看着代码，在看着周期，一个个对，你或许就明白一些了。不说了上代码

import React from 'react';
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    //获取初始props
    static defaultProps = {
        ...
     }
     //初始props的type
     static propTypes = {
        ...
     }
     //组件将要渲染
     componentWillMount(){
        ...
     }
     //组件已经渲染完毕
     componentDidMount(){
        ...
     }
     //props或者state改变
     componentWillReceiveProps(nextProps,nextState){
        ...
     }
     //是否渲染
     shouldComponentUpdate(){
        return true
     }
     //更新前
     componentWillUpdate(){
        ...
     }
     //更新后
     componentDidUpdate(){
        ...
     }
     
    //卸载组件
     componentWillUnmount(){
        ...
     }

    render() {
        return (
            <div>
                ...
            </div>
        )

    }
}

export default Demo；

  以上写法是es6的，大家参考啊。行了。不说了，老样子，睡前一根烟。

补充 react 16.3

  新的react版本，将废弃一些生命周期,这些周期删除的原因是react官方认为他们被滥用，和不安全的生命周期，所以要废弃他们。并且出来了一些新的生命周期来替代他们。

废弃的周期

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate
  目前16.3使用他们还是ok的，但是在dev的版本下会有不安全提示。将在 react17.0 彻底移除他们。

新的生命周期

• 静态getDerivedStateFromProps

• 动态getSnapshotBeforeUpdate

static getDerivedStateFromProps

  新的 static getDerivedStateFromProps 生命周期在组件实例化以及接收新 props后调用。它可以返回要更新的对象state，或者null等等。我们具体看一下：
我们来定义一个 Height 组件

import React from 'react'

class Height extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            aaa:''
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        console.log(4444, nextProps, prevState)
        return null
    }

    componentDidMount() {
        setTimeout(()=>{
            this.setState({
                aaa: '~~~~'
            });
        },2000)
    }


    render() {
        return (
            <div>
                我是一个普通组件{this.props.newprops}{this.state.aaa}
            </div>
        );
    }
}

我们测试了一下，只是实例化的时候触发了一次，看到了之前这里我们 setState 了一下，这里 static getDerivedStateFromProps 这个生命周期并没有被触发。那么怎么触发他呢，上文已经解释很清楚了，在实例化时触发一次，接受到新的 props 再触发一次。好的我们来改变他的 props 。
写一个新的父组件。

import Height from './component/heightcompoent/index.js'

class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            demo: ''
        }
    }
    componentDidMount() {
        setTimeout(()=>{
            this.setState({
                demo: '!!!'
            });
        },1000)

    }


    render() {
        return <div>
            <Height newprops={this.state.demo}/>
        </div>
    }
}

这里我们改变了 Height 组件的 props ，果然 Height 组件的 static getDerivedStateFromProps 被触发了。打印出了新的props。

getSnapshotBeforeUpdate

这个生命周期也是 react 新版本提出的，它的就比较好理解了，代替之前的 componentWillUpdate ，但是 要注意 使用 getSnapshotBeforeUpdate 这个生命周期，必须使用 componentDidUpdate 不然会报错。他可以传递值给 componentDidUpdate ，每当新的 state 或者新的 props 更新时会调用此生命周期。

        getSnapshotBeforeUpdate(prevProps, prevState) {
            console.log(2222, prevProps, prevState);
            return 1
        }

        componentDidUpdate(prevProps, prevState, snapshot) {
            console.log(3333,prevProps, prevState,snapshot) //obj,obj, 1
        }

可以看到我们在 getSnapshotBeforeUpdate 这个生命周期中 return 的值 ，在 componentDidUpdate 这个生命周期里接收到传递过来的值。