react框架
react是目前前端比较火的框架。背景是Facebook。框架其实并不稀奇，人永远不可能追框架，因为追框架永远追不到头，但是每种框架和库都是为了解决问题，他们的思想是能改变历史的，思想很重要，和人一样有了思想才能成事。
序言
要想练此功，不需要自宫。。兄弟别紧张，不过要把之前的思想忘记掉，这句话很重要，划重点，因为是单页，从jq过度过来你不能以jq的思想去想渲染效果，要以数据结构的方式去想，这里我就不多说了，后面的react相关文章会循序渐进的给大家讲解的。其实我们没必要把它看得很复杂，说白了框架是方便大家开发的，你会发现用框架开发模式会方便，忘记之前所有思想切记，来吧，我们先看看 react 生命周期。
生命周期
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 这个生命周期里接收到传递过来的值。
