react生命周期

摘要： 很多值得了解的细节。 原文： React入门看这篇就够了 作者： Random Fundebug 经授权转载，版权归原作者所有。 React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MVC 框架，仅仅是视图（V）层的库 React 官网 React 中文文档 特点 使用 JSX语法 创建组件，实现组件化开发， 为函数式的 UI 编程方式打开了大门 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新 HTML仅仅是个开始 > JSX --TO--> EveryThing - JSX --> HTML - JSX --> native ios或android中的组件（XML） - JSX --> VR - JSX --> 物联网 为什么要用React 使用 组件化 开发方式，符合现代Web开发的趋势 技术成熟，社区完善，配件齐全，适用于大型Web项目

生命周期 概述 意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等 组件的生命周期： 组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数 构造函数的作用：为开发人员在不同阶段操作组件提供了实际 组件生命周期的三个阶段 1 - 创建时（挂载阶段） 执行时机： 组件创建时（页面加载时） 执行顺序: constructor() --> render() --> componentDidMount() 生命周期钩子函数： constructor() 初始化state 为事件处理程序绑定this render() 渲染UI componentDidMount() 进行DOM操作 发送ajax请求 2、 触发组件更新的三种情况 执行条件： 1、setState() 2、forceUpdata() 3、组件接收到新的props render() --> componentDidMount() 组件更新 componentDidUpdate() 拿到上一次的props -- ： prevProps 拿到这一次的props -- ： this.props 3、卸载阶段 钩子函数： componentWillUnmount 执行清理工作，防止内存泄漏

问题1：什么是虚拟DOM？ 主题: React 难度: ⭐ 虚拟 DOM (VDOM) 是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为 调和 。 问题2：类组件和函数组件之间的区别是啥？ 主题: React 难度: ⭐⭐ 类组件 可以使用其他特性，如状态 state 和生命周期钩子。 当组件只是接收 props 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。 函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。 区别 函数组件 类组件 是否有 this 没有 有 是否有生命周期 没有 有 是否有状态 state 没有 有 问题 3：React 中 refs 干嘛用的？ 主题: React 难度: ⭐⭐ Refs 提供了一种访问在 render 方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中， props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的 pros 重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs 。 咱们可以在组件添加一个 ref

React生命周期16版本 1. 初始化阶段 - 自动执行 1. constructor 继承属性 定义状态 绑定事件this 2. componentWillMount 3. render 生成vdom 计算 this.props this.state 4. componentDidMount 数据请求 - 数据修改 - 获取真实DOM 2. 更新阶段 - 数据改变 1. componentWillReceiveProps [ 属性改变才执行 ] 接收新属性， 判断组件属性是否改变，可以用于监听 2. shouldComponentUpdate 性能优化关键钩子函数 ， 控制组件是否要更新 3. componentWillUpdate 4. render 5. componentDidUpdate 获得了更新后的真实dom 3. 销毁阶段 1. componentWillUnmount 组件销毁， 善后 4. 错误处理阶段 1. componentDidCatch 记录错误信息和错误栈 、 2. 功能实现降级UI 来源： https://www.cnblogs.com/hff-syt/p/11975000.html

依然是先看图： 变更缘由 原来( React v16.0 前)的生命周期在 React v16.0 推出的 Fiber 之后就不合适了，因为如果要开启 async rendering ， 在 render 函数之前的所有函数，都有可能被执行多次。 有上一篇我们知道下面的这些生命周期都是原来( React v16.0 前)在 render 前执行的: componentWillMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate 除了 shouldComponentUpdate ，其他在 render 函数之前的 所有函数( componentWillMount ， componentWillReceiveProps ， componentWillUpdate )都被 getDerivedStateFromProps 替代。 也就是用一个静态函数 getDerivedStateFromProps 来取代被 deprecate 的几个生命周期函数，就是强制开发者在 render 之前只做无副作用的操作，而且能做的操作局限在根据 props 和 state 决定新的 state 。 React v16.0 刚推出的时候，是增加了一个 componentDidCatch 生命周期函数

本篇文章我们来学习 React 的生命周期 大部分团队不见得会跟进升到 16.0 以后版本，所以我们先来学习 16.0 以前的生命周期 React v16.0 前的生命周期 这里我画了一张流程图，我们根据本图来分析： 1、组件初始化( initialization )阶段 也就是以下代码中类的构造方法( constructor() )， Test 类继承了 react Component 这个基类，也就继承这个 React 的基类，才能有 render() ,生命周期等方法可以使用，这也说明为什么 函数组件不能使用这些方法 的原因。 super(props) 用来调用基类的构造方法( constructor() ), 也将父组件的 props 注入给子组件，功子组件读取(组件中 props 只读不可变， state 可变)。 而 constructor() 用来做一些组件的初始化工作，如定义 this.state 的初始内容。 import React, { Component } from 'react'; class Test extends Component { constructor(props) { super(props); } } 2、组件的挂载( Mounting )阶段 此阶段分为 componentWillMount ， render ，

摘要： 很多值得了解的细节。 原文： React入门看这篇就够了 作者： Random Fundebug 经授权转载，版权归原作者所有。 React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MVC 框架，仅仅是视图（V）层的库 React 官网 React 中文文档 特点 使用 JSX语法 创建组件，实现组件化开发， 为函数式的 UI 编程方式打开了大门 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新 HTML仅仅是个开始 > JSX --TO--> EveryThing - JSX --> HTML - JSX --> native ios或android中的组件（XML） - JSX --> VR - JSX --> 物联网 为什么要用React 使用 组件化 开发方式，符合现代Web开发的趋势 技术成熟，社区完善，配件齐全，适用于大型Web项目

原文来自:https://www.cnblogs.com/lilicat/p/10456481.html 小程序生命周期： 小程序分为应用、页面和组件三个部分，所以小程序的生命周期涉及到的知识点有一下几个: 　　1、应用的生命周期 :app() 　　2、页面的生命周期：page 　　3、组件的生命周期：component 　　4、应用的生命周期对页面生命周期的影响 (1) 应用的生命周期 App() 函数用来注册一个小程序，接受一个object参数，其指定小程序的生命周期回调等。 App()必须在app.js中调用，必须调用且只能调用一次。 App({ onLaunch : function( options) { // 监听小程序初始化。小程序初始化完成时（全局只触发一次） }, onShow : function( options) { // 监听小程序显示。小程序启动，或从后台进入前台显示时 }, onHide : function( ) { // 监听小程序隐藏。小程序从前台进入后台时。 }, onErro r: function( msg) { console.log(msg) // 错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息 }, onPageNotFound : function( res) { // 页面不存在监听函数

挂载阶段 constructor //触发时间： React组件的构造函数在挂载之前被调用 //作用： //调用super(props)，用来将父组件传来的props绑定到这个类中，使用// this.props将会得到 //做一些初始化的操作，比如： state的初始化、非箭头函数的实例属性的this绑定 //说明 // 禁止在constructor中调用setState,可以直接给state赋初始值 getDerivedStateFromProps /* ! 这个钩子函数要求要有返回值，返回值是一个新的状态或是null； *//* 调用时间： 该函数会在挂载时，接收到新的props，调用了setState和/forceUpdate时被调用 作用： 一个静态方法，所以不能在这个函数里面使用this，这个函数有两个参数props和state，分别指接收到的新参数和当前的state对象，这个函数会返回一个对象用来更新当前的state对象，如果不需要更新可以返回null console.log('getDerivedStateFromProps') // return null return { age: 40 // 这里可以更新一次state } } componentWillMount/UNSAVE_componentWillMount(即将废弃)UNSAVE

React 16之后有三个生命周期被废弃(但并未删除) componentWillMount componentWillReceiveProps componentWillUpdate 官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们。 目前React 16.8 +的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段。 挂载阶段: constructor: 构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this getDerivedStateFromProps: static getDerivedStateFromProps(nextProps, prevState) ,这是个静态方法,当我们接收到新的属性想去修改我们state，可以使用getDerivedStateFromProps render: render函数是纯函数，只返回需要渲染的东西，不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容 componentDidMount: 组件装载之后调用，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作