react的生命周期函数怎么使用

这篇文章主要介绍“react的生命周期函数怎么使用”，在日常操作中，相信很多人在react的生命周期函数怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react的生命周期函数怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！ react的生命周期函数有：1、componentWillMount函数；2、componentDidMount函数；3、shouldComponentUpdate函数；4、componentWillUpdate函数；5、componentDidUpdate函数；6、componentWillUnmount函数；7、componentWillReceiveProps函数。先来了解一下react的生命周期函数有哪些：组件将要挂载时触发的函数：componentWillMount组件挂载完成时触发的函数：componentDidMount是否要更新数据时触发的函数：shouldComponentUpdate将要更新数据时触发的函数：componentWillUpdate数据更新完成时触发的函数：componentDidUpdate组件将要销毁时触发的函数：componentWillUnmount父组件中改变了props传值时触发的函数：componentWillReceivePr免费云主机、域名ops下面来上代码详细说明一下一.挂载部分
根据官方生命周期图我们可以看到，一个组件的加载渲染，首先是defaultProps和propsTypes然后就是constructor及this.state里的初始数据，所以到这里是第一步。接着就是componentWillMount 组件将要开始挂载了，这是第二步。然后组件挂载，render解析渲染，所以第三步呼之欲出，就是render数据都渲染完成，最后componentDidMount
组件挂载完成。子组件代码，父组件内引入渲染即可（这里先不上代码）打开控制台查看
二.数据更新部分
数据更新的话第一步是shouldComponentUpdate确认是否要更新数据，当这个函数返回的是true的时候才会进行更新，并且这个函数可以声明两个参数nextProps和nextState，
nextProps是父组件传给子组件的值，nextState是数据更新之后值，这两个值可以在这个函数中获取到。第二步当确认更新数据之后componentWillUpdate将要更新数据，第三步依旧是render，数据发生改变render重新进行了渲染。第四步是componentDidUpdate数据更新完成。代码的话子组件在上一部分的基础上，在this.state中定义一个初始数据，render中绑定一下这个数据，之后再增加一个按钮声明一个onClick事件去改变这个数据。这样可以看到数据更新部分的效果，我这里把第一部分的代码删掉了，看着不那么乱。三.单独说一下componentWillReceiveProps，父组件中改变了props传值时触发的函数
这个函数也就是当我们父组件给子组件传值的时候改变了props的值时触发的函数，刚才在第二部分中也说到shouldComponentUpdate这个函数可以携带两个参数，nextProps就是父组件传给子组件的值
在父组件中定义一个初始title数据，写一个按钮声明一个onClick事件去改变这个title四.componentWillUnmount组件将要销毁时的函数
在父组件中定义一个flag为true的状态值，添加一个按钮声明一个onClick事件去
更改这个flag实现销毁组件。父组件代码：子组件完整代码：点击挂载/销毁生命周期函数组件这个按钮的时候
子组件消失，控制台打印：组件销毁了。当父组件给子组件传值时
这里nextProps这个就有上图划红线的值了。
那么我们再点击改变app组件的title这个按钮

这里可以看到componentWillReceiveProps这个函数被触发了，nextProps这个值也发生了改变。到此，关于“react的生命周期函数怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: jquery mobile如何使用

这篇文章主要介绍“jquery mobile如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jquery mobile如何使用”文章能帮助大家解决问题。 jQuery Mobile 是 web 应用程序框架，它能…