react生命周期

React的生命周期和Vue的生命周期很多的相似部分，可以说是大致的结构都是类似的，下面我们先看看React中常用的生命周期图 　　 1.constructor() 组件挂载之前调用的构造函数 　　1）组件不需要为state赋予初始值或者不需要绑定事件的情况下不需要为组件添加构造函数或者不需要使用props中的值 　　2）constructor（）方法的基本使用 constructor(props){ super(props) //不要再此处调用setState方法 this.state={ count:1 } handClick=()=>{ this.setState({ count:this.state.count++ }) } } 2.render() 组件中唯一必须实现的方法 　　1）render函数应该保持是一个纯函数，在state不变的情况下，每次输出相同，render函数保持纯函数的好处是代码可读性更好 　　2）如需与浏览器进行交互请在componentDidMount()中进行或者在其他生命周期函数中实现 3.componentDidMount() 组件挂载后（插入DOM树中调用） 　　1）如需进行网络请求这里是个很好的时机 　　2）此时适合添加订阅，添加完成订阅，记得在componentWillUnmount()取消订阅（此函数会在组件摧毁之前调用） 　　3

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') ); 让我们来快速概括一下发生了什么和这些方法的调用顺序： 当 <Clock /> 被传给 ReactDOM.render() 的时候，React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化

React 组件的生命周期方法 按渲染顺序： 1： componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。 2： componentDidMount() – 仅在第一次渲染后在客户端执行。 3： componentWillReceiveProps（）– 当从父类接收到 props 并且在调用另一个渲染器之前调用。一个常见的误解是，当props“改变”时， getDerivedStateFromProps 和 componentWillReceiveProps 才会被调用。事实上， 只要父组件重新渲染，这些生命周期函数就会被调用，不管这些props是否与以前“不同” 。 3： shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。 默认情况下，它返回 false。当这个方法返回false的时候，整个组件（类）都不会再执行（渲染）下去 ，所以最好在不会影响其他组件的组件里使用此方法。 shouldComponentUpdate 最好作为性能优化使用，而不是为了确保派生状态的正确性 4： componentWillUpdate() – 在 DOM 中进行渲染之前调用。 5： componentDidUpdate() – 在渲染发生后立即调用。 6：

1、当类组件被传递给 ReactDOM.render() 时，React调用类组件的构造函数，初始化一些参数变量 constructor(props) { super(props); this.state = {date: new Date()}; } 2、React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。 3、当类的输出插入到 DOM 中时，会调用函数：componentDidMount() ，在里边调用接口获得渲染数据 componentDidMount(){ console.log('--------componentDidMount-----------'); } 4、利用this.setState() 函数改变变量值，动态变化 this.setState({ date: new Date() }); 5、一旦Clock组件被从DOM中移除，React会调用componentWillUnmount()这个钩子函数，做些清理工作 componentWillUnmount() { clearInterval(this.timerID); } 来源： https://blog.csdn.net/qq_36336332/article/details

这是它的一个生命周期 钩子函数 ，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个 html元素 上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个 钩子函数 ，方便开发者在不同阶段处理不同逻辑。 一般可以在created函数中调用ajax获取页面 初始化 所需的数据。 实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如， created 这个钩子在实例被创建之后被调用： var vm = new Vue({ data: { a: 1 }, created: function ( ) { // `this` 指向 vm 实例 console.log( 'a is: ' + this.a) } }) // -> "a is: 1" 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted 、 updated 、 destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

初始化阶段： 设置组件的默认属性 设置组件的初始化状态 componentWillMount render componentDidMount 运行时： componentWillReceiveProps 触发时机：已经挂载的组件接收到新的props时触发，即使传进来的props没有发生改变也会触发这个生命周期，所以需要比较当前的props和下一次次的props,使用this.setstate()来改变this.state的值 shouldComponentUpdate 触发时机：接收到新的state和props的时候，返回bool值，现在推荐使用pureComponent代替 componentWillUpdate 触发时机： 在state和props发生改变或者shouldComponentUpdate返回值为true的时候，注意不要在里面调用this.setState(),死循环 componnentDidUpdate 触发时机：在发生更新或者componentWillUpdate触发后， 销毁阶段 componentWillUnmount 触发时机： 页面销毁前 PureComponent，纯组件，提高性能、少写shouldComponnetUpdate,与之前的状态进行浅比较，当改动的是引用数据的时候,并不会触发更新，慎用 16.4新的生命周期

一. react16当前生命周期 componentWillMount render前，所以setState不会重新渲染，服务端渲染唯一调用，推荐用constructor代替之 render componentDidMount render后，调用setState会重新渲染，页面可交互，可以请求数据 componentWillRecieveProps(nextProps) 已挂载组件接收到新props触发 shouldComponentUpdate(nextProps, nextState) 在接收到新的props或state时是否重新渲染，默认返回true；首次渲染或forceUpdate时不会触发; componentWillUpdate(nextProps, nextState) 如果shouldComponentUpdate返回false，update相关的函数都不会触发；不要使用setState； componentDidUpdate(nextProps, nextState) componentWillUnmount 卸载组件 二. 由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数 componentWillMount componentWillRecieveProps componentWIllUpdate 三. 新增两个 static

componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。 来源： https://www.cnblogs.com/wrhbk/p/11319512.html

父子组件生命周期： 　　“生命周期”细想之下有点浪漫主义色彩，不知道是不是从lifecycle英译过来的。作为一个前端从业者，如果让我来取，可能会取成“渲染周期”之类的，毕竟是和浏览器打交道的职业，浏览器的layout使dom树具有骨架，paint则让整个页面光亮起来。 　　React 的一切都是组件，通过 React.createElement 方法来创建嵌套层级，说白了在内存中构建对象树，据此渲染到浏览器中成为dom树，这个时候一个节点是什么时候真正渲染到页面中就变得重要起来，因为只有这个时候你才能真正和浏览器环境内的对象和方法交互，同样离开的时候也需要清理监听器等防止干扰后续逻辑，因此钩子函数，也可以说是生命周期函数就有了存在的意义。 　　先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script crossorigin src="https://unpkg.com/react