react 生命周期 虚拟DOM原理

1 react生命周期

• componentWillMount:

在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染。

• render

根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render） ，return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。

• componentDidMount:

组件挂载到DOM后调用，且只会被调用一次

• componentWillReceiveProps(nextProps)

只要父组件的render函数被调用，那么当前组件(子组件)都会触发这个函数，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥

使用场景

import React from 'react'

class ListItem extends React.Component {
    render() {
        return (
            <li>{this.props.name} <input/></li>
        )
    }
   
    componentWillUpdate(nextProps, nextState) {
        console.log(nextProps.name, this.props.name)
        console.log(`listItem更新`)
    }
    componentDidMount() {
        console.log(`listItem加载`)
    }
    componentWillUnmount() {
        console.log(`listItem卸载`)
    }
}

// 列表渲染
class App extends React.Component {
    constructor(props) {
        super(props)
        window.app = this
        this.state = {
            name: '麦乐',
            person: '花花'
        }
    }
    render() {
        const { name, person } = this.state
        return (
            <div>
              <p>{person}</p>
              <ListItem name={name}/>
            </div>
        )
    }
}
export default App

可以看到，我们并没有改变子组件的props，子组件也进行了一次更新，这是因为父组件的状态的改变，调用了render函数，导致了左右子组件的重新渲染。我们可以在这个函数内部判断，nextProps跟this.props是否相等 然后做相应的操作。不要这这个组件中发ajax请求，不要调用setState。

• shouldComponentUpdate(nextProps, nextState)

此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。就比如说上面的问题，父组件状态的改变，触发render，子组件也触发了render，不管props有没有发生改变。这是我们可以这样做性能优化。

子组件增加下面代码

 shouldComponentUpdate(nextProps, nextState) {
        console.log(nextProps.name, this.props.name)
        if(nextProps.name === this.props.name) return false
        return true
    }

可以看到子组件没有做不必要的更新。

• componentWillUpdate(nextProps, nextState)

此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。

• render

render方法在上文讲过，这边只是重新调用。

• componentDidUpdate(prevProps, prevState)

此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state

子组件中增加下面代码

componentDidUpdate(prevProps, prevState) {
    console.log('prevProps.name',prevProps.name)
}

• componentWillUnmount

此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

 

2 造成组件重新渲染的情况

1.父组件重新render

每当父组件重新render导致的重传props，子组件将直接跟着重新渲染，无论props是否有变化。可通过shouldComponentUpdate方法优化。

class Child extends Component {
   shouldComponentUpdate(nextProps){ // 应该使用这个方法，否则无论props是否有变化都将会导致组件跟着重新渲染
        if(nextProps.someThings === this.props.someThings){
          return false
        }
    }
    render() {
        return <div>{this.props.someThings}</div>
    }
}

2.组件本身调用setState，无论state有没有变化。可通过shouldComponentUpdate方法优化

class Child extends Component {
   constructor(props) {
        super(props);
        this.state = {
          someThings:1
        }
   }
   shouldComponentUpdate(nexProps, nextStates){ // 应该使用这个方法，否则无论state是否有变化都将会导致组件重新渲染
        if(nextStates.someThings === this.state.someThings){
          return false
        }
        return true
    }

   handleClick = () => { // 虽然调用了setState ，但state并无变化
        const preSomeThings = this.state.someThings
         this.setState({
            someThings: preSomeThings
         })
   }

    render() {
        return <div onClick = {this.handleClick}>{this.state.someThings}</div>
    }
}

3 几个主要生命周期的执行顺序

import React from 'react'

class GrandSon extends React.Component {
    render() {
        console.log('GrandSon render')
        return (
            <div>{this.props.name}GrandSon </div>
        )
    }
    componentWillMount() {
        console.log('GrandSon将要加载')
    }
    componentDidMount() {
        console.log('GrandSon加载完成')

    }
    componentWillUpdate(nextProps, nextState) {
        console.log('GrandSon更新')
    }
    componentDidUpdate(preProps, preState) {
        console.log('GrandSon更新完成')
    } 
    componentWillUnmount(preProps, preState) {
        console.log('GrandSon卸载')
    }
}
class Son extends React.Component {
    render() {
        console.log('son render')
        return (
            <div>{this.props.name} Son
                { this.props.name ? <GrandSon  name={this.props.name}/> : '' }
             </div>
        )
    }
    componentWillMount() {
        console.log('Son将要加载')
    }
    componentDidMount() {
        console.log('son加载完成')

    }
    componentWillUpdate(nextProps, nextState) {
        console.log('son更新')
    } 
    componentDidUpdate(preProps, preState) {
        console.log('Son更新完成')
    } 
    componentWillUnmount(preProps, preState) {
        console.log('son卸载')
    }
}

// 列表渲染
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '麦乐',
        }
    }
    render() {
        console.log('app render')
        const { name } = this.state
        return (
            <div>
                {name} app
              {
                this.state.name ? <Son name={name}/> : ''
              }
            </div>
        )
    }
    componentWillMount() {
        console.log('app将要加载')
    }
    componentDidMount() {
        window.app = this
        console.log('app加载完成')

    }
    componentWillUpdate(nextProps, nextState) {
        console.log('app更新')
    } 
    componentDidUpdate(preProps, preState) {
        console.log('app更新完成')
    } 
    componentWillUnmount(preProps, preState) {
        console.log('app卸载')
    }
}
export default App

 

4 什么是虚拟DOM？

vdom可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息，如下图：

 

当我们在jsx文件中写这样的代码的时候，react会帮我们创建一个元素出来。 

 

5 为什么要使用虚拟DOM？

之前使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情，往往是DOM标签和js逻辑同时写在js文件里，数据交互时不时还要写很多的input隐藏域，如果没有好的代码规范的话会显得代码非常冗余混乱，耦合性高并且难以维护。

另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，vdom就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率

6 react-diff

然后再来了解react的diff算法，

• 标签的改变

页面中一个标签的改变，react 会移除div 增加 span

•  组件的改变

react会卸载Header组件 加载Content组件,测试代码

import React from 'react'

class Header extends React.Component {
    render() {
        return (
            <div>
               header
            </div>
        )
    }
    componentDidMount() {
        console.log('Header mount')
    }
   componentWillUnmount() {
    console.log('Header unMount')
   }
}
class Footer extends React.Component {
    render() {
        return (
            <div>
               footer
            </div>
        )
    }
    componentDidMount() {
        console.log('Footer mount')
    }
    componentWillUnmount() {
    console.log('Footer unMount')
   }
}
// 条件渲染
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            flag: true
        }
    }
    render() {
        return (
            <div>
               {
                   this.state.flag ? <Header/> : <Footer/>
               }
            </div>
        )
    }
}
export default App

 

在react-devtool中对状态改变，看到页面的打印结果

 

• key是react用来标记组件的。

1 列表的渲染验证 key的重要性，下面看没有key的的情况

import React from 'react'

class ListItem extends React.Component {
    render() {
        return (
            <p>{this.props.item}</p>
        )
    }
    componentWillUpdate(nextPros, nextState) {
        console.log(`${this.props.item}更新`)
    }
    componentDidMount() {
        console.log(`${this.props.item}加载`)
    }
    componentWillUnmount() {
        console.log(`${this.props.item}卸载`)
    }
}

// 列表渲染
class App extends React.Component {
    constructor(props) {
        super(props)
        window.app = this
        this.state = {
            list: ['a', 'b', 'c' , 'd']
        }
    }
    render() {
        const { list } = this.state
        return (
            <div>
              {
                  list.map((item, index) => (
                    <ListItem item={item}/>
                  ))
              }
            </div>
        )
    }
}
export default App

这里的this.props.item是上一个props的

 从第一个节点的组件开始比较，发现第一个组件，内容不同，更新一下，内容换成b,b组件也是一样，c,d组件卸载了。

加上key 

render() {
        const { list } = this.state
        return (
            <div>
              {
                  list.map((item, index) => (
                    <ListItem 
                     key={item} item={item}/>
                  ))
              }
            </div>
        )
    }

渲染b组件的时候会去找key是b的组件，找到后更新，然后把a组件和d组件都卸载了

回忆一下组件更新的情况，父组件重新render 直接使用,每当父组件重新render导致的重传props，子组件将直接跟着重新渲染

2 用index作为key，react会把key相同的组件当作同一个组件

import React from 'react'

class ListItem extends React.Component {
    render() {
        return (
             <li>{this.props.name} <input/></li>
        )
    }
    componentWillUpdate() {
        console.log(`${this.props.name}更新`)
    }
    componentDidMount() {
        console.log(`${this.props.name}加载`)
    }
    componentWillUnmount() {
        console.log(`${this.props.name}卸载`)
    }
}
class List extends React.Component {
    render() {
        return (
            this.props.list.map((item, index) => (
                <ListItem name={item} key={item}/>
              ))
        )
    }
    componentWillUpdate() {
        console.log(`list更新`)
    }
    componentDidMount() {
        console.log(`list加载`)
    }
    componentWillUnmount() {
        console.log(`list卸载`)
    }
}

// 列表渲染
class App extends React.Component {
    constructor(props) {
        super(props)
        window.app = this
        this.state = {
            list: ['a', 'b', 'c' ]
        }
    }
    render() {
        const { list } = this.state
        return (
            <div>
              <List list={list} />
            </div>
        )
    }
}
export default App

input内容没有改变，原因看下图

{this.state.data.map((v,idx)=><Item key={idx} v={v} />)}
// 开始时：['a','b','c']=>
<ul>
    <li key="0">a <input type="text"/></li>
    <li key="1">b <input type="text"/></li>
    <li key="2">c <input type="text"/></li>
</ul>

// 数组重排 -> ['c','b','a'] =>
<ul>
    <li key="0">c <input type="text"/></li>
    <li key="1">b <input type="text"/></li>
    <li key="2">a <input type="text"/></li>
</ul>

数组重排以后，同一个key就是同一个组件，由于父组件render函数执行，所以不管子组件有没有发生变化，都会重新渲染。但由于有key的组件有标记，内容改变了，会重新更换内容， input节点没有发生改变，所有input 没有变。

3 我们把key={item},换个值，不使用index

 

{this.state.data.map((v,idx)=><Item key={idx} v={v} />)}
// 开始时：['a','b','c']=>
<ul>
    <li key="a">a <input type="text"/></li>
    <li key="b">b <input type="text"/></li>
    <li key="c">c <input type="text"/></li>
</ul>

// 数组重排 -> ['c','b','a'] =>
<ul>
    <li key="c">c <input type="text"/></li>
    <li key="b">b <input type="text"/></li>
    <li key="a">a <input type="text"/></li>
</ul>

同一个相当于同一个组件，内容没有发生改变，不会重新渲染。所以inpput内容也不会发生变化。只是将整个组件移动了位置。