首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

setState inside componentWillReceiveProps生命周期重组特别

在React中,componentWillReceiveProps是一个生命周期方法,用于在组件接收到新的props时进行一些操作。然而,从React v16.3开始,componentWillReceiveProps被标记为过时的,并且在未来的版本中可能会被移除。相反,推荐使用getDerivedStateFromProps方法来处理props的更新。

setState是React组件中用于更新组件状态的方法。它接受一个对象作为参数,用于更新组件的状态值。在componentWillReceiveProps生命周期方法中使用setState是可能的,但需要小心处理,因为在该方法中更新状态可能会导致一些问题。

由于componentWillReceiveProps方法在接收到新的props时被调用,因此在该方法中使用setState可能会导致组件的状态更新频繁,从而引发性能问题。这是因为每次调用setState都会触发组件的重新渲染。

为了避免这个问题,可以在componentWillReceiveProps方法中使用条件语句来检查props是否发生了变化,只有在props发生变化时才调用setState。这样可以避免不必要的状态更新和重新渲染。

另外,从React v16.3开始,推荐使用getDerivedStateFromProps方法来替代componentWillReceivePropsgetDerivedStateFromProps方法是一个静态方法,它接收props和state作为参数,并返回一个新的状态对象。通过在getDerivedStateFromProps方法中根据props的变化来更新状态,可以更好地控制组件的更新。

总结起来,尽量避免在componentWillReceiveProps生命周期方法中使用setState,而是使用getDerivedStateFromProps方法来处理props的更新。这样可以更好地控制组件的状态更新,避免不必要的重新渲染。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 深入系列4:组件的生命周期

正常情况下,当组件发生更新时,组件的生命周期方法的调用顺序如下: componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate...-> 结束 或(组件自身调用setState,导致的组件更新): shouldComponentUpdate -> 结束 setState的时机 组件的生命周期方法众多,哪些方法中可以调用setState...一般情况下,当调用setState后,组件会执行一次更新过程,componentWillReceiveProps等更新阶段的方法会再次被调用,但如果在componentWillReceiveProps中调用...setState,并不会额外导致一次新的更新过程,也就是说,当前的更新过程结束后,componentWillReceiveProps等更新阶段的方法不会再被调用一次。...不可以的方法 其他生命周期方法都不能调用setState,主要原因有两个: 产生死循环。

1.1K20
  • React生命周期深度完全解读

    其他生命周期函数中只能通过 this.setState 修改 state,不能直接为 this.state 赋值。...在首次渲染组件时,不会调用此生命周期钩子;使用 this.setState 触发组件更新时,也不会调用此生命周期钩子。...可以在这个生命周期中直接调用 this.setState,但是必须包裹在一个条件语句中,否则会导致死循环。...例如:在首次渲染的时候,会执行与 mount 相关的生命周期函数;触发子组件的 this.setState 只会调用子组件中与 update 相关的生命周期函数;触发父组件的 this.setState...因为是在父组件中调用 this.setState 方法触发的更新,并不会执行它的 componentWillReceiveProps 生命周期函数,而由于父组件更新导致的子组件更新,是会执行子组件的 componentWillReceiveProps

    1.7K21

    React Async Rendering

    componentDidUpdate componentWillUnmount 第1阶段的生命周期函数可能会被多次调用 (引自生命周期hook | 完全理解React Fiber) 一般道德约束render...,简单地说就是废弃这3个函数: 16.3版本:引入带UNSAFE_前缀的3个生命周期函数UNSAFE_componentWillMount,UNSAFE_componentWillReceiveProps...二.新生命周期函数 v16.3已经开始了迁移准备,推出了3个带UNSAFE_前缀的生命周期函数和2个辅助生命周期函数 UNSAFE_前缀生命周期 UNSAFE_componentWillMount()...) 没什么区别,只是改了个名 辅助生命周期 getDerivedStateFromProps和getSnapshotBeforeUpdate是v16.3新引入的生命周期函数,用来辅助解决以前通过componentWillReceiveProps...使用,用来解决之前需要在componentWillReceivePropssetState的场景,比如state依赖更新前后的props的场景 getSnapshotBeforeUpdate getSnapshotBeforeUpdate

    1.5K60

    详解React组件生命周期

    ​ 目录 前言 对于生命周期的理解 生命周期的三个状态 重要的钩子 即将废弃的钩子 钩子函数的具体作用 组件的生命周期执行次数 执行多次: 组件生命周期执行顺序 小例子 ---- 前言 最近一直在学...4、componentWillReceiveProps(nextProps) 接收父组件新的props时,重新渲染组件执行的逻辑。...5、shouldComponentUpdate(nextProps, nextState) 在setState以后,state发生变化,组件会进入重新渲染的流程时执行的逻辑。...组件的生命周期执行次数 只执行一次的: constructor componentWillMount componentDidMount 执行多次: render 子组件的componentWillReceiveProps...第一级别的组件setState是不能触发其父组件的生命周期更新函数,只能触发更低一级别的生命周期更新函数。 总结起来就如下图: ​ 小例子 ​ <!

    2K40

    异步渲染的更新

    我们学到的最重要的经验是,一些遗留的组件生命周期往往会造成不安全的编码实践,它们是: componentWillMount componentWillReceiveProps componentWillUpdate...在开始之前,下面是关于 16.3 版本计划的生命周期变更的快速概述: 我们将添加以下生命周期别名:UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps...与 componentDidUpdate 一起,这个新的生命周期涵盖遗留的 componentWillReceiveProps 的所有用例。...> this.props.currentRow, }); } } } 尽管上面的代码本身没有问题,但是 componentWillReceiveProps 生命周期经常被误用,...如果你正在以本博文未涵盖的方式使用 componentWillMount、componentWillUpdate 或者 componentWillReceiveProps,并且不确定如何迁移这些遗留的生命周期

    3.5K00

    React官方最新发版,16.9支持组件性能评估

    关键变更如下: 在16.9版本中使用componentWillMount、componentWillReceiveProps和componentWillUpdate将会收到React发出的警告。...废弃 Factory 组件 用于测试的 act()方法正式支持异步 Unsafe 生命周期 在16.3版本时,React团队就讨论过这三个生命周期潜在的问题,并且在16.3版本中将加入UNSAFE_前缀作为他们的别名...componentWillMount → UNSAFE_componentWillMount componentWillReceiveProps → UNSAFE_componentWillReceiveProps...其实没什么太大的影响,官方保证即便在17.0中,使用UNSAFE_的生命周期也可以正常使用,也只是生命周期函数名字变更了而已。想要在老项目升级时避免抛出warning,可以手动变更函数名。...在以前的版本中,act()中写异步代码(异步状态更新)将会抛出如下警告 An update to SomeComponent inside a test was not wrapped in act(.

    90860

    React Native组件(一)组件的生命周期

    componentWillReceiveProps componentWillReceiveProps(nextProps) componentWillReceiveProps方法会在挂载的组件接收到新的...通常在这个方法中接收新的props值,并根据props的变化,通过调用 this.setState() 来更新组件state,this.setState()不会触发 render方法的调用。...在挂载的过程中,初始的props并不会触发调用componentWillReceiveProps方法,这个方法只会在组件中的props更新时被调用,另外,调用this.setState()也不会触发调用...componentWillReceiveProps方法。...需要注意的是,在这个方法中,不能使用 this.setState 来更改state,如果想要根据props来更改state,需要在componentWillReceiveProps方法中去实现,而不是在这里

    1.7K50

    浅谈 React 生命周期

    ,我们不难看出,React废弃 componentWillMount componentWillReceiveProps componentWillUpdate 三个钩子函数,接下来我们先分别介绍各个生命周期函数...UNSAFE_componentWillReceiveProps UNSAFE_componentWillReceiveProps(nextProps) ❝「注意」 此生命周期之前名为 componentWillReceiveProps...调用 this.setState() 通常不会触发 UNSAFE_componentWillReceiveProps()。...原来的 「componentWillReceiveProps」 方法仅仅在更新阶段才会被调用,而且在此函数中调用 setState 方法更新 state 会引起额外的 re-render,如果处理不当可能会造成大量无用的...在了解了 Fiber 架构的执行机制之后,再回过头去看一下被废弃的生命周期函数: componentWillMount componentWillUpdate componentWillReceiveProps

    2.3K20

    前端react面试题总结

    为什么调用 setState 而不是直接改变 state?解答如果您尝试直接改变组件的状态,React 将无法得知它需要重新渲染组件。通过使用setState()方法,React 可以更新组件的UI。...如果需要基于另一个状态(或属性)更新组件的状态,请向setState()传递一个函数,该函数将 state 和 props 作为其两个参数:this.setState((state, props) =>...但如果在componentWillReceiveProps生命周期直接调用父组件的某些有调用setState的函数,会导致程序死循环// 如下是子组件componentWillReceiveProps里调用父组件改变...会触发Parent组件重新渲染,而Parent组件重新渲染会触发Child组件的componentWillReceiveProps生命周期函数执行。如此就会陷入死循环。导致程序崩溃。...所以,React官方把componentWillReceiveProps替换为UNSAFE_componentWillReceiveProps,让小伙伴在使用这个生命周期的时候注意它会有缺陷,要注意避免

    2.5K30

    深入理解React生命周期

    componentDidMount() 成长:Update 取得新的props 改变state 处理用户的互动操作 和各层次组件通信 该阶段重复发生,花费时间最多 componentWillReceiveProps...和this.state进行操作了,比如对props计算后调用setState() 是注册和监听全局事件的好机会,比如window resize或Flux store 3.6 组件渲染render() 不同于其他生命周期方法...() 4.1.3 forceUpdate() 强制组件进入更新阶段 4.2 更新过程和componentWillReceiveProps() 向组件实例传递props后,成长周期中的首个生命周期方法componentWillReceiveProps...() render() //禁止setState() componentDidMount() //慎用setState() Props改变: componentWillReceiveProps(nextProps...) //禁止setState() render() //禁止setState() componentDidUpdate(prevProps, prevState) //慎用setState() State

    1.3K10

    React基础(8)-React中组件的生命周期

    :组件挂载开始之前调用,也就是render函数之前被自动调用,在React16.3版本之后不应该使用,由于该函数在Render函数之前调用,因此使用同步的setState方法不会触发额外的render处理...,它与组件的装载一样,会触发一些生命周期函数 更新组件时:生命周期函数执行的顺序 componentWillReceiveProps(nextProps,nextState):只要父组件的render函数被调用...,在render函数里面被渲染的子组件就会经历更新的过程,无论父组件传给子组件的props有没有改变,都会触发子组件的componentWillReceiveProps函数 你可以理解为,第一次渲染时,...父组件的componentWillReceiveProps函数不会被执行,如果是第二次渲染时,已经存在于父组件中,则该componentWillReceiveProps才会执行 注意:在挂载过程中,React...再次改变state,如果需要,则在componentWillReceiveProps函数中改变 render:决定该组件UI渲染结果,返回的结果用于构造DOM对象 注意:不能在render函数中调用setState

    2.2K20

    第三篇:为什么 React 16 要更改组件的生命周期?(下)

    第一个重点是最特别的一点:getDerivedStateFromProps 是一个静态方法。静态方法不依赖组件实例而存在,因此你在这个方法内部是访问不到 this 的。...因此,getDerivedStateFromProps 生命周期替代 componentWillReceiveProps 的背后,是 React 16 在强制推行“只用 getDerivedStateFromProps...带着这个结论,我们再来看看 React 16 打算废弃的是哪些生命周期: 1. componentWillMount; 2. componentWillUpdate; 3. componentWillReceiveProps...在“componentWill”开头的生命周期里,你习惯于做的事情可能包括但不限于: 1. setState(); 2. fetch 发起异步请求; 3. 操作真实 DOM。...比如在 componentWillReceiveProps 和 componentWillUpdate 里滥用 setState 导致重复渲染死循环的,大家都懂哈(邪魅一笑)。

    1.2K20
    领券