资讯专栏INFORMATION COLUMN

React生命周期

SHERlocked93 / 3012人阅读

摘要:阶段组件即将挂载的生命周期函数执行渲染的函数组件完全挂载完成表示可以操作元素的生命周期组件更新的阶段触发更新的条件是的改变与的改变父组件传递给子组件的发生改变的时候触发初始化父组件的时候是不会被执行的触发条件一个组件需要从父组件接收参数就是

Mounting阶段

// 组件即将挂载的生命周期函数
componentWillMount(){}

// 执行渲染的函数
render(){}

// 组件完全挂载完成 表示可以操作DOM元素的生命周期
componentDidMount(){}

组件更新的阶段 触发更新的条件是state的改变与props的改变

// 父组件传递给子组件的props发生改变的时候触发(初始化父组件的时候是不会被执行的)
// 触发条件 1.一个组件需要从父组件接收参数 就是含有props 2.只要父组件的render函数被重新执行(就是初始化的时候是不会执行的),子组件的这个生命周期就会被执行
componentWillReceiveProps(nextProps){ }


// 组件更新之前会被执行 门神函数 必须返回false 或者 true
shouldComponentUpdata(nextProps,nextState){

}

// 组件即将更新
componentWillUpdate(nextProps,nextState){

}

//渲染函数
render(){

}

// 组件更新完毕 可以获取到更新之前的props state
componentDidUpdate(prevProps,prevState){}

组件的销毁阶段

// 组件将要被销毁
componentWillUnmount(){

}

使用过程出现的问题

表单赋值 初始值的时候 如果里面的表单的值有模糊搜索的情况,就会出现里面的值被恢复到了初始值,原因是表单赋值的时候 我们直接绑定的value 而不是 defaultValue 如果是defaultValue 那么就只会出现一次赋值的情况
// 出现这种情况的前置条件 就是表单的初始值 是有父级通过props传递下去的 当父组件的state 或者 store 里面的值改变的时候,都会触发组件的重新渲染


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108448.html

相关文章

  • React专题:生命周期

    摘要:而生命周期钩子,就是从生到死过程中的关键节点。异步渲染下的生命周期花了两年时间祭出渲染机制。目前为这几个生命周期钩子提供了别名,分别是将只提供别名,彻底废弃这三个大活宝。生命周期钩子的最佳实践是在这里初始化。 本文是『horseshoe·React专题』系列文章之一,后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的 个人博客 获得无与伦比的阅读体验 生命周期...

    Hanks10100 评论0 收藏0
  • 捋一捋React生命周期

    摘要:卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用,只跟实例的创建有关。 前言:React 的版本从 v15 到 v16.3 ,再到v16.4,现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入,而最令人困惑的却是它的生命周期,新旧生命周期函数混杂在一起,难免会让许多新来者有很多困惑。所以这一篇我们来...

    MobService 评论0 收藏0
  • ReactV16.3,即将更改的生命周期

    摘要:我们目前的计划是为不安全生命周期引入别名,和。从现在开始,只有新的生命周期名称将起作用。从版本开始,更新以响应更改的推荐方法是使用新的静态生命周期。 注释:本文是根据React的官方博客翻译而成(文章地址:https://reactjs.org/blog/2018...)。主要讲述了React之后的更新方向,以及对之前生命周期所出现的问题的总结,之后的React将逐步弃用一些生命周期和...

    wendux 评论0 收藏0
  • React组件生命周期详解

    摘要:组件生命周期构造方法是对类的默认方法,通过命令生成对象实例时自动调用该方法。该生命周期可以发起异步请求,并。后废弃该生命周期,可以在中完成设置渲染组件是一个组件必须定义的生命周期,用来渲染。该生命周期内可以进行。 React组件生命周期 constructor( ) 构造方法 constructor是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是...

    learn_shifeng 评论0 收藏0
  • React.js 小书 Lesson20 - 更新阶段的组件生命周期

    摘要:所以对于组件更新阶段的组件生命周期,我们简单提及并且提供一些资料给大家。这里为了知识的完整,补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期 本文作者:胡子大哈本文原文:http://huziketang.com/books/react...

    Yumenokanata 评论0 收藏0
  • React组件生命周期

    摘要:组件生命周期此文章适合之前的版本,,添加了一些新的生命周期函数,同时准备废弃一些会造成困扰的生命周期函数。每个生命周期阶段调用的钩子函数会略有不同。 React组件生命周期 此文章适合 React@17 之前的版本,React@16.3.0,添加了一些新的生命周期函数,同时准备废弃一些会造成困扰的生命周期函数。所有如果在React@17 发布之前,这篇文章还是适用的。新的生命周期请看官...

    mgckid 评论0 收藏0

发表评论

0条评论

SHERlocked93

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<