react生命周期

新的生命周期 Mounting（加载阶段：涉及4个钩子函数） constructor() 加载的时候调用一次，可以初始化state static getDerivedStateFromProps(props, state) 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法 render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行 componentDidMount() 组件渲染之后调用，只调用一次 Updating（更新阶段：涉及5个钩子函数) static getDerivedStateFromProps(props, state) 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。 1、beforeCreate 　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。 2、created 　　实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。 3、beforeMount 　　在挂载开始之前被调用：相关的render函数首次被调用。 　　该钩子在服务器端渲染期间不被调用。 4、mounted 　　el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。 　　该钩子在服务端渲染期间不被调用。 5、beforeUpdate 　　数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。 　　你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。 　　该钩子在服务端渲染期间不被调用。 6、updated 　　由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 　　当这个钩子被调用时

组件生命周期的三个阶段 Mounting（加载阶段） Updating（更新阶段） Unmounting（卸载阶段） Mounting（加载阶段：涉及6个钩子函数） constructor() ：加载的时候调用一次，可以初始化state getDefaultProps() ：设置默认的props，也可以用dufaultProps设置组件的默认属性。 getInitialState() ：初始化state，可以直接在constructor中定义this.state componentWillMount() ：在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。 render() ：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行，注意：不要在render中修改state，会有改变组件状态的副作用，会导致死循环。 componentDidMount() ：组件挂载到DOM后调用，且只会被调用一次 Updating（更新阶段：涉及5个钩子函数) componentWillReceivePorps(nextProps) ：在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用

旧声明周期： */ /*--> */ 生命周期 属于阶段 调用次数 是否可以setState 作用 getDefaultProps 创建阶段（Mounting） 1次（全局调用1次） 不可以 getInitialState 创建阶段（Mounting） 1次 不可以 componetWillMount 创建阶段（Mounting） 1次 可以；不会触发 re-render render 创建阶段（Mounting） 和 更新阶段（Updating） >=1次 不可以 componentDidMount 创建阶段（Mounting） 1次 可以；触发re-render，影响性能 componetWillReceiveProps 更新阶段（Updating） >=0 可以 shouldComponentUpdate 更新阶段（Updating） >=0 不可以 该方法通过返回 true 或者 false 来确定是否需要触发新的渲染。返回 false， 则不会触发后续的 UNSAFE_componentWillUpdate()、render() 和 componentDidUpdate()（ 但是 state 变化还是可能引起子组件重新渲染 ）。 componentWillUpdate 更新阶段（Updating） >=0 不可以 componentDidUpdate 更新阶段

在一个组件的整个生命周期中，通过用户的交互来更新state或者props，重新渲染组件，更新页面的ui。组成一个简单的“状态机”。 react的生命周期三个阶段： Mounting 挂载 1、 constructor()构造方法 constructor是ES6对类的默认方法，通过 new命令生成对象实例时自动调用该方法。初始化执行一次。 使用constructor必须手动调用super方法。需要调用this.props必须传入props 。 在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。 class ClassName extends React.Component { constructor(props) { super(props); // 必须调用super方法 console.log(this.props); // 这里可以拿到this.props的值 this.state = {}; // 在constructor中可以初始化state this.state = { color: props.color }; // !这种操作是错误的，应该避免 this

1.React的生命周期主要有有两个钩子： （1）componentDidMount(): 当组件渲染到DOM时触发； （2）componentWillUnmount(): 当组件在页面上销毁时触发； 2.关于React中的state: （1）state是可变的，但是不能直接更改，需要通过setState()修改； （2）在constructor中可以给state赋初值； （3）setState()的更新可能是异步的，所以不能过分依赖this.state与this.props设置下一个状态,最好使用函数参数。 （4）传入到setState()中的状态对象会合并上一个状态对象。 3.关于React的事件： （1）事件采用的是camel命名法； （2）组织默认事件不能使用return false; 而是使用preventDefault（）； （3）自定义事件需要bind到this对象上； 3.阻止DOM渲染，可以再render方法中返回null,且不会影响生命周期； 来源： https://www.cnblogs.com/qingxiawu/p/8610008.html

constructor()：构造函数 执行：组件加载钱最先调用一次，仅调用一次。 作用：定义状态机变量。 注意：第一个语句必须为super(), 否则会报错： 'this' is not allowed before super() constructor(props) { super(props); this.state = { content:null, } } componentWillMount() 执行：组件初始渲染(render()被调用前)前调用，仅调用一次。 作用：如果这个函数调用的setState改变了组件的某些状态，react会等待setState完成后再渲染组件。 注意：子组件也有componentWillMount函数，在父组件的该函数调用后再调用。 render() 执行：componentWillMount调用之后， componentDidMount调用之前。 作用：渲染挂载组件。 触发：1、初始化加载页面，2、状态机改变setState，3、接收新的props（父组件更新） 注意：组件必要函数，不能在函数内使用setState改变状态机。 componentDidMount() 时间：render之后被调用，仅调用一次。 作用：渲染挂载组件，可以使用refs(react支持的一个特殊属性，可以将它加在render函数返回的组件元素上，起一个标记作用

import React, {Component} from 'react'; class LifeCycle extends Component { // [基本流程] // constructor 创建一个组件 constructor(props) { super(props); console.log('constructor'); } // componentWillMount 第一次渲染之前 componentWillMount() { console.log('componentWillMount'); } // componentDidMount 第一次渲染之后 componentDidMount() { console.log('componentDidMount'); } // render 第一次渲染 render() { console.log('render'); return (<div>LifeCycle</div>); } // [修改流程：当组件的状态数据发生改变时] // shouldComponentUpdate 是否允许组件渲染 shouldComponentUpdate(nextProps, nextState, nextContext) { } // componentWillUpdate 重新渲染之前

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

一、组件生命周期的执行次数是什么样子的？？？ 只执行一次： constructor 、 componentWillMount 、 componentDidMount 执行多次： render 、子组件的 componentWillReceiveProps 、 componentWillUpdate 、 componentDidUpdate 有条件的执行： componentWillUnmount （页面离开，组件销毁时） 不执行的：根组件（ ReactDOM . render 在 DOM 上的组件）的 componentWillReceiveProps （因为压根没有父组件给传递 props ） 二、组件的生命周期执行顺序是什么样子的？？？ 　　假设组件嵌套关系是 App里有parent组件，parent组件有child组件。 如果不涉及到setState更新，第一次渲染的顺序如下： App： constructor --> componentWillMount --> render --> parent : constructor --> componentWillMount --> render --> child : constructor --> componentWillMount --> render --> componentDidMount (child) -->