react生命周期

前面的话 　　为了理解React的工作过程，就必须要了解react组件的生命周期，如果人有生老病死，自然界有日月更替，每个组件在网页中也会被创建、更新和删除，如同有生命的机体一样。本文将详细介绍react组件生命周期 概述 　　每一个组件都有几个可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用，而带有前缀 did 的方法则会在特定环节之后被调用 【装配】 　　这些方法会在组件实例被创建和插入DOM中时被调用： constructor()static getDerivedStateFromProps() componentWillMount()（版本17之后失效） render() componentDidMount() 【更新】 　　属性或状态的改变会触发一次更新。当一个组件在被重渲时，这些方法将会被调用： componentWillReceiveProps()（版本17之后失效）static getDerivedStateFromProps() shouldComponentUpdate() componentWillUpdate() （版本17之后失效） render()getSnapshotBeforeUpdate() componentDidUpdate() 【卸载】 　　当一个组件被从DOM中移除时，该方法被调用

在jsx中不能使用class定义类名 因为class在js中是用来定义类的 定义类名的时候用className label中的for必须写成htmlFor ReactDOM.render: 参数1：需要渲染的dom元素或者组件 参数2：需要将渲染好的元素挂载在哪个挂载点身上 参数3：回调 成功的回调 React中如何创建一个组件 通过class类的方式来创建一个组件 class 组件名称 extends React.Component 注意：这个组件中必须要写一个render函数 函数中必须返回一个jsx语法 插槽作用： 插槽即：ReactDOM.createPortal(child, container) ，由ReactDom提供的接口。 可以实现将子节点渲染到父组件DOM层次结构之外的DOM节点。 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 片段(fragment)。第二个参数（container）则是一个 DOM 元素。 应用场景： 对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式，但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如，对话框、hovercards以及提示框。所以一般react组件里的模态框，就是这样实现的~ React.Component：

摘要： 很多值得了解的细节。 原文： 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项目

组件生命周期函数总览 组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting） Mounting： constructor() componentWillMount() render() componentDidMount() Updating componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() Unmounting componentWillUnmount() 组件生命周期 - 创建阶段(Mounting) 特点：该阶段的函数只执行一次 constructor() 作用：1 获取props 2 初始化state 说明：通过 constructor() 的参数 props 获取 设置state和props componentWillMount() 说明：组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里 同步 地设置状态将不会触发重渲染 注意：无法获取页面中的DOM对象 注意：可以调用 setState() 方法来改变状态值 用途：发送ajax请求获取数据 render() 作用：渲染组件到页面中，无法获取页面中的DOM对象 注意：

组件生命周期 一般来说，一个组件类由 extends Component 创建，并且提供一个 render 方法以及其他可选的生命周期函数、组件相关的事件或方法来定义。 一个简单的例子： import React, { Component } from 'react'; import { render } from 'react-dom'; class LikeButton extends Component { constructor(props) { super(props); this.state = { liked: false }; } handleClick(e) { this.setState({ liked: !this.state.liked }); } render() { const text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick.bind(this)}> You {text} this. Click to toggle. </p> ); } } render( <LikeButton />, document.getElementById('example') ); getInitialState 初始化 this.state

constructor: 　　1、当前生命周期函数的作用是用来做初始化工作的, 　　　在调用当前函数的时候必须在内部调用super,否则this的指向会发生错误 　　2、 当前生命周期函数可以用来定义当前组件所需要用到的一些状态值 　　3、 在constructor中如果需要使用props的时候需要在super中继承过来 componentWillMount:挂载前 　　1、当前生命周期函数可以用来接受外部的数据，将外部的数据转换成内部的数据，在这个生命周期里面尽量不要使用 　　setState 因为当前生命周期执行完毕以后就会执行render 　　2、用来做最后数据最后的修改 　　3、当前生命周期函数在新版本中被废除掉了 render:渲染 　　1、当this.state/this.props发生改变的时候render函数就会执行 　　2、 render函数每次执行的时候都会将虚拟DOM在缓存中缓存一份，当下一次render函数执行的时候，会与缓存中的 　　虚拟DOM进行对比(这种对比叫做diff算法) 将发生改变的虚拟DOM进行更新 componentDidMount:挂载后 　　当前生命周期函数我们可以通过this.ref来获取真实的DOM结构 　　this.refs.属性 　　ref={()=>{}} 　　this.属性 　

实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化之后更新，这一过程和上面一样，但没有getDefaultProps这个过程 简单记忆：props => state => mount => render => mounted 存在期 组件已经存在，状态发生改变时 componetWillReceiveProps shouldComponentUpdate ComponentWillUpdate render componentDidUpdate 销毁期 componentWillUnmount 生命周期中10个API的作用说明 getDefaultProps 作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享 getInitialState 作用于组件实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props componentWillMount 在完成首次渲染之前调用，此时可以修改组件的state render 必选方法，创建虚拟DOM，该方法具有特殊规则： 只能通过this.props 和this.state访问数据 可以返回null、false或任何React组件

1.getDefaultProps 作用于组件类，只调用一次，返回对象用于设置默认的 props ，对于引用值，会在实例中共享。 2.getInitialState 作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的 state ，此时可以访问 this.props 。 3.componentWillMount 在完成首次渲染之前调用，此时仍可以修改组件的state。 4.render 必选的方法，创建虚拟DOM，该方法具有特殊的规则： 只能通过 this.props 和 this.state 访问数据 可以返回 null 、 false 或任何React组件 只能出现一个顶级组件（不能返回数组） 不能改变组件的状态 不能修改DOM的输出 5.componentDidMount 真实的DOM被渲染出来后调用，在该方法中可通过 this.getDOMNode() 访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。 在服务端中，该方法不会被调用。 6.componentWillReceiveProps 组件接收到新的 props 时调用，并将其作为参数 nextProps 使用，此时可以更改组件 props 及 state 。 componentWillReceiveProps: function(nextProps) { if (nextProps.bool)

组件的生命周期 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() componentWillMount() 之后将废弃 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() componentWillUpdate() 、 componentWillReceiveProps() 之后将被废弃 卸载 当组件从 DOM 中移除时会调用如下方法： componentWillUnmount() 错误处理 当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法： static getDerivedStateFromError() componentDidCatch() 组件还提供了一些额外的 API： setState() forceUpdate() 单独介绍 getDerivedStateFromProps 这个生命周期函数是为了替代

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React生命周期</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class Components extends React.Component { constructor(props){ super(props); this.state = {} } componentWillMount(){ console.log("实例化：componentWillMount") } componentDidMount(){ console.log("实例化：componentDidMount") }