devbox
程序代码艺术家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

react 生命周期 虚拟DOM原理_react 函数 生命周期 虚拟dom

作者：程序代码艺术家 | 2024-01-30 21:55:03

赞

踩

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是否改变，以及如果改变了要执行啥

使用场景

  1. import React from 'react'
  2.  
  3. class ListItem extends React.Component {
  4.     render() {
  5.         return (
  6.             <li>{this.props.name} <input/></li>
  7.         )
  8.     }
  9.    
  10.     componentWillUpdate(nextProps, nextState) {
  11.         console.log(nextProps.name, this.props.name)
  12.         console.log(`listItem更新`)
  13.     }
  14.     componentDidMount() {
  15.         console.log(`listItem加载`)
  16.     }
  17.     componentWillUnmount() {
  18.         console.log(`listItem卸载`)
  19.     }
  20. }
  21.  
  22. // 列表渲染
  23. class App extends React.Component {
  24.     constructor(props) {
  25.         super(props)
  26.         window.app = this
  27.         this.state = {
  28.             name: '麦乐',
  29.             person: '花花'
  30.         }
  31.     }
  32.     render() {
  33.         const { name, person } = this.state
  34.         return (
  35.             <div>
  36.               <p>{person}</p>
  37.               <ListItem name={name}/>
  38.             </div>
  39.         )
  40.     }
  41. }
  42. export default App

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

  • shouldComponentUpdate(nextProps, nextState)

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

子组件增加下面代码

  1.  shouldComponentUpdate(nextProps, nextState) {
  2.         console.log(nextProps.name, this.props.name)
  3.         if(nextProps.name === this.props.name) return false
  4.         return true
  5.     }

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

  • componentWillUpdate(nextProps, nextState)

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

  • render

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

  • componentDidUpdate(prevProps, prevState)

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

子组件中增加下面代码

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

  • componentWillUnmount

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

 

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

1.父组件重新render

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

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

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

  1. class Child extends Component {
  2.    constructor(props) {
  3.         super(props);
  4.         this.state = {
  5.           someThings:1
  6.         }
  7.    }
  8.    shouldComponentUpdate(nexProps, nextStates){ // 应该使用这个方法，否则无论state是否有变化都将会导致组件重新渲染
  9.         if(nextStates.someThings === this.state.someThings){
  10.           return false
  11.         }
  12.         return true
  13.     }
  14.  
  15.    handleClick = () => { // 虽然调用了setState ，但state并无变化
  16.         const preSomeThings = this.state.someThings
  17.          this.setState({
  18.             someThings: preSomeThings
  19.          })
  20.    }
  21.  
  22.     render() {
  23.         return <div onClick = {this.handleClick}>{this.state.someThings}</div>
  24.     }
  25. }

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

  1. import React from 'react'
  2.  
  3. class GrandSon extends React.Component {
  4.     render() {
  5.         console.log('GrandSon render')
  6.         return (
  7.             <div>{this.props.name}GrandSon </div>
  8.         )
  9.     }
  10.     componentWillMount() {
  11.         console.log('GrandSon将要加载')
  12.     }
  13.     componentDidMount() {
  14.         console.log('GrandSon加载完成')
  15.  
  16.     }
  17.     componentWillUpdate(nextProps, nextState) {
  18.         console.log('GrandSon更新')
  19.     }
  20.     componentDidUpdate(preProps, preState) {
  21.         console.log('GrandSon更新完成')
  22.     } 
  23.     componentWillUnmount(preProps, preState) {
  24.         console.log('GrandSon卸载')
  25.     }
  26. }
  27. class Son extends React.Component {
  28.     render() {
  29.         console.log('son render')
  30.         return (
  31.             <div>{this.props.name} Son
  32.                 { this.props.name ? <GrandSon  name={this.props.name}/> : '' }
  33.              </div>
  34.         )
  35.     }
  36.     componentWillMount() {
  37.         console.log('Son将要加载')
  38.     }
  39.     componentDidMount() {
  40.         console.log('son加载完成')
  41.  
  42.     }
  43.     componentWillUpdate(nextProps, nextState) {
  44.         console.log('son更新')
  45.     } 
  46.     componentDidUpdate(preProps, preState) {
  47.         console.log('Son更新完成')
  48.     } 
  49.     componentWillUnmount(preProps, preState) {
  50.         console.log('son卸载')
  51.     }
  52. }
  53.  
  54. // 列表渲染
  55. class App extends React.Component {
  56.     constructor(props) {
  57.         super(props)
  58.         this.state = {
  59.             name: '麦乐',
  60.         }
  61.     }
  62.     render() {
  63.         console.log('app render')
  64.         const { name } = this.state
  65.         return (
  66.             <div>
  67.                 {name} app
  68.               {
  69.                 this.state.name ? <Son name={name}/> : ''
  70.               }
  71.             </div>
  72.         )
  73.     }
  74.     componentWillMount() {
  75.         console.log('app将要加载')
  76.     }
  77.     componentDidMount() {
  78.         window.app = this
  79.         console.log('app加载完成')
  80.  
  81.     }
  82.     componentWillUpdate(nextProps, nextState) {
  83.         console.log('app更新')
  84.     } 
  85.     componentDidUpdate(preProps, preState) {
  86.         console.log('app更新完成')
  87.     } 
  88.     componentWillUnmount(preProps, preState) {
  89.         console.log('app卸载')
  90.     }
  91. }
  92. 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组件,测试代码

  1. import React from 'react'
  2.  
  3. class Header extends React.Component {
  4.     render() {
  5.         return (
  6.             <div>
  7.                header
  8.             </div>
  9.         )
  10.     }
  11.     componentDidMount() {
  12.         console.log('Header mount')
  13.     }
  14.    componentWillUnmount() {
  15.     console.log('Header unMount')
  16.    }
  17. }
  18. class Footer extends React.Component {
  19.     render() {
  20.         return (
  21.             <div>
  22.                footer
  23.             </div>
  24.         )
  25.     }
  26.     componentDidMount() {
  27.         console.log('Footer mount')
  28.     }
  29.     componentWillUnmount() {
  30.     console.log('Footer unMount')
  31.    }
  32. }
  33. // 条件渲染
  34. class App extends React.Component {
  35.     constructor(props) {
  36.         super(props)
  37.         this.state = {
  38.             flag: true
  39.         }
  40.     }
  41.     render() {
  42.         return (
  43.             <div>
  44.                {
  45.                    this.state.flag ? <Header/> : <Footer/>
  46.                }
  47.             </div>
  48.         )
  49.     }
  50. }
  51. export default App

 

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

 

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

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

  1. import React from 'react'
  2.  
  3. class ListItem extends React.Component {
  4.     render() {
  5.         return (
  6.             <p>{this.props.item}</p>
  7.         )
  8.     }
  9.     componentWillUpdate(nextPros, nextState) {
  10.         console.log(`${this.props.item}更新`)
  11.     }
  12.     componentDidMount() {
  13.         console.log(`${this.props.item}加载`)
  14.     }
  15.     componentWillUnmount() {
  16.         console.log(`${this.props.item}卸载`)
  17.     }
  18. }
  19.  
  20. // 列表渲染
  21. class App extends React.Component {
  22.     constructor(props) {
  23.         super(props)
  24.         window.app = this
  25.         this.state = {
  26.             list: ['a', 'b', 'c' , 'd']
  27.         }
  28.     }
  29.     render() {
  30.         const { list } = this.state
  31.         return (
  32.             <div>
  33.               {
  34.                   list.map((item, index) => (
  35.                     <ListItem item={item}/>
  36.                   ))
  37.               }
  38.             </div>
  39.         )
  40.     }
  41. }
  42. export default App

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

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

加上key 

  1. render() {
  2.         const { list } = this.state
  3.         return (
  4.             <div>
  5.               {
  6.                   list.map((item, index) => (
  7.                     <ListItem 
  8.                      key={item} item={item}/>
  9.                   ))
  10.               }
  11.             </div>
  12.         )
  13.     }

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

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

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

  1. import React from 'react'
  2.  
  3. class ListItem extends React.Component {
  4.     render() {
  5.         return (
  6.              <li>{this.props.name} <input/></li>
  7.         )
  8.     }
  9.     componentWillUpdate() {
  10.         console.log(`${this.props.name}更新`)
  11.     }
  12.     componentDidMount() {
  13.         console.log(`${this.props.name}加载`)
  14.     }
  15.     componentWillUnmount() {
  16.         console.log(`${this.props.name}卸载`)
  17.     }
  18. }
  19. class List extends React.Component {
  20.     render() {
  21.         return (
  22.             this.props.list.map((item, index) => (
  23.                 <ListItem name={item} key={item}/>
  24.               ))
  25.         )
  26.     }
  27.     componentWillUpdate() {
  28.         console.log(`list更新`)
  29.     }
  30.     componentDidMount() {
  31.         console.log(`list加载`)
  32.     }
  33.     componentWillUnmount() {
  34.         console.log(`list卸载`)
  35.     }
  36. }
  37.  
  38. // 列表渲染
  39. class App extends React.Component {
  40.     constructor(props) {
  41.         super(props)
  42.         window.app = this
  43.         this.state = {
  44.             list: ['a', 'b', 'c' ]
  45.         }
  46.     }
  47.     render() {
  48.         const { list } = this.state
  49.         return (
  50.             <div>
  51.               <List list={list} />
  52.             </div>
  53.         )
  54.     }
  55. }
  56. export default App

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

  1. {this.state.data.map((v,idx)=><Item key={idx} v={v} />)}
  2. // 开始时：['a','b','c']=>
  3. <ul>
  4.     <li key="0">a <input type="text"/></li>
  5.     <li key="1">b <input type="text"/></li>
  6.     <li key="2">c <input type="text"/></li>
  7. </ul>
  8.  
  9. // 数组重排 -> ['c','b','a'] =>
  10. <ul>
  11.     <li key="0">c <input type="text"/></li>
  12.     <li key="1">b <input type="text"/></li>
  13.     <li key="2">a <input type="text"/></li>
  14. </ul>

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

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

 

  1. {this.state.data.map((v,idx)=><Item key={idx} v={v} />)}
  2. // 开始时：['a','b','c']=>
  3. <ul>
  4.     <li key="a">a <input type="text"/></li>
  5.     <li key="b">b <input type="text"/></li>
  6.     <li key="c">c <input type="text"/></li>
  7. </ul>
  8.  
  9. // 数组重排 -> ['c','b','a'] =>
  10. <ul>
  11.     <li key="c">c <input type="text"/></li>
  12.     <li key="b">b <input type="text"/></li>
  13.     <li key="a">a <input type="text"/></li>
  14. </ul>

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

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/49776
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号