react生命周期

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

export default class ClickS extends React.Component { constructor (props) { super(props) this.state= { msg: '123' } console.log(this.props) console.log('挂在前') } // componentWillMount // 这个生命周期函数，现在已经被废弃 static getDerivedStateFromProps () { console.log('挂在前') return null } shouldComponentUpdate (nextProps,nextStates) { // 可以用来优化render } componentWillUpdate () { // 函数在shouldComponentUpdate之后render之前执行 } componentDidUpdate () { // 函数在更新完毕之后执行 } componentWillUnmount () { // 函数在组件删除之前执行 } componentWillReceiveProps () { // 组件第一次存在于dom中，函数不会渲染 // 如果已存在于dom中，函数才会被执行 } componentDidMount () { console

React组件在生命周期里面大概有两种情况，一种是初次渲染，一种是状态更新导致再次渲染。咱们从组件生命周期的每一步可进行的操作的角度来了解一下。 初次渲染 构造函数，指定This，初始状态，绑定函数（constructor） constructor(props){ //指定This super(props) //设置初始化状态 this.state={ value:'', focus:false } //为组件上的函数绑定this this.handleChange = this.handleChange.bind(this); } 构造函数在组件初次渲染的时候只运行一次，构造函数里面进行的操作大概有上述代码的三种操作。 2.组件安装（componentWillMount） void componentWillMount() 在组件挂载之前调用一次。在这个函数里面你可以调用setState方法设置组件state，然后经过render函数渲染可以得到state被设置之后的效果。 3.组件生成DOM，必须JSX规则（render） render(){ return( <div className="FilterableProductTable"> <SearchBar value={this.state.value} handleChange={this.handleChange}

每个组件都包含“生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。 挂载 当组件实例被 创建 并 插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 卸载 当组件从 DOM 中移除时会调用如下方法： componentWillUnmount() 错误处理 当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法： setState() forceUpdate() 来源： https://www.cnblogs.com/liang-meng/p/11769149.html

前言：因为生命周期是必须要掌握的，所以React的第二篇咱就写这。 (版本：16.3.2） React的生命周期大致分为四个状态：分别是Mouting、Updating、Unmounting、Error handing。以下，让我们来介绍各个状态吧。 （注：不被官网推荐使用的我不会放入实际运行步骤中） Mouting 创建实例插入Dom的过程状态，将按以下顺序调用这些方法： constructor() static getDerivedStateFromProps() （组建实例化时或props变化会被调用） componentWillMount() / UNSAFE_componentWillMount() render() componentDidMount() constructor()： 需要初始化state值或bind函数时调用。该方法在类被加载前运行，在用该类时，需要调用super(props)，不然props的调用会出错。 static getDerivedStateFromProps(nextprops，prevstate)： props变化时被调用，若是父组件重新渲染，也会被调用。它返回新的props值。 componentWillMount()： render()前调用的一个函数，现官网不推荐使用。 render()： 组件的必需品。内容应为相对纯粹的html文

每个组件都包含“生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。 挂载 当组件实例被 创建 并 插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 卸载 当组件从 DOM 中移除 时会调用如下方法： componentWillUnmount() 错误处理 当 渲染过程 ， 生命周期 ，或 子组件的构造函数中 抛出错误时，会调用如下方法： setState() forceUpdate() 来源：博客园 作者： LiangM 链接：https://www.cnblogs.com/liang-meng/p/11769149.html

一、组件挂载阶段 　　1. componentWillMount() 　　该方法在首次渲染之前调用，在一个组件挂载到卸载的过程中，仅仅执行这一次。该函数内可以state初始化的工作，与constructor的作用类似。这里也是在render方法调用前最后一次修改state的方法。 　　这里不建议使用Ajax获取接口数据，因为是异步的，所以在接下来的第一次render中根本接收不到响应数据。 　　willMount中setState还是会多一次渲染 　　2. render() 　　该方法创建一个虚拟dom，表示组件的输出。（输出可以应用到react-dom，react-native） 　　3.componentDidMount() 　　该方法调用时，表明已经渲染出真实的dom，可以在该方法中获取任意节点。 二、组件更新阶段 　　2.1 父组件状态改变，触发子组件更新（简单说是获取到了新的props） 　　　　2.1.1 componentWillReceiveProps(nextProps) 　　　　当父级组件state或者props发生改变时，子组件会调用该方法。这里的nextProps和this.props需要我们自己判断是否相同来做出相应的操作。比如根据新的props来setState 　　　　2.1.2 shouldComponentUpdate(nextProps,

前言 日常积累，欢迎指正 正文 需求 有这样一个需求： props.planId 修改就要触发 getPlanDetailByPlanId(planId : string|number) 当然会相应有一个 state.data ,在 get 方法中根据 id 请求到正确的数据后再 setState({data}) 就能实现页面正确结果的显示啦！ 处理思路 在 react 未更新的版本中这种情况在生命周期方法 componentWillReceiveProps 中处理，但在新生命周期中我们不再使用这个方法，初学 react 新生命周期时我们一般都会了解到有一个用于替代 componentWillReceiveProps 的生命周期方法 static getDerivedStateFromProps() 所以马上想到在这个方法里面触发编写的 getPlanDetailByPlanId 方法。 但是请注意生命周期方法 getDerivedStateFromProps 的修饰符 static ,之前的思路就行不通了，那到底该怎么处理呢？我目前的解决办法是在 shouldComponentUpdate 方法中处理： shouldComponentUpdate ( nextProps , nextState ) { const { planId } = nextProps if ( this

这里的组件指的是 有状态组件 ，只有有状态组件才有this.state和生命周期函数 React组件生命周期分为三部分： - **组件创建阶段**：特点：一辈子只执行一次 >constructor： > componentWillMount: > render： > componentDidMount: 页面加载发送ajax 或者 进行dom操作 - **组件运行阶段**：按需，根据 props 属性 或 state 状态的改变，有选择性的 执行 0 到多次 > componentWillReceiveProps: > shouldComponentUpdate: > componentWillUpdate: > render: > componentDidUpdate: - **组件销毁阶段**：一辈子只执行一次 > componentWillUnmount: 来源： https://www.cnblogs.com/chujunqiao/p/11758045.html

如今前端框架都流行组件化，页面元素都可以使用组件进行高度概括，那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系，才能让代码按照我们与预料方式工作。最近参与了一个Vue.js的项目，在处理父子嵌套组件之间关系时遇到了较大的阻力，虽然问题最后解决了，但是以花费大量时间为代价的，记录在这里，希望下次不踩同样的坑，能更高效的处理此类问题。 0 问题描述 同react，vue组件也有一套完整的生命周期，不同阶段有不同的分工。总体来讲经常会用的生命周期钩子有以下几种： created mounted destroy 通常会在这些钩子中处理一些异步请求，最常见的就是发起网络请求调用api获取数据。 这里有个问题：在单一组件中，钩子的执行顺序是 created -> mounted -> destroyed ，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢? 最近开发中遇到的一个“诡异”的问题，就是由于对父子组件生命周期钩子执行顺序理解不透彻引起的。问题是这样的：有一个组件有由一系列子组件组成，子组件又被分解成组件，这样下来就构成了三级组件。需求是在组件显示在页面上之后，再将数据初始化进行回显。父组件获取数据后传递到子组件，要求子组件根据这个值将内部元数据进行过滤和加工