`

React组件的生命周期及其方法

阅读更多

React组件的生命周期主要包含三个部分,React提供生命周期的方法,我们可以在这些方法中放入自己的逻辑代码。React还提供will方法(会在某些行为发生之前调用),和did方法(会在某些行为发生之后调用)。

 

    挂载: 组件被插入到DOM中;

  • getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法,返回初始的state数据。
  • componentWillMount()在挂载发生之前立即被调用。
  • componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。
  • 挂载的方法(Mounted Methods)
  • 挂载的复合组件也支持如下方法:

    • getDOMNode(): DOMElement可以在任何挂载的组件上面调用,用于获取一个指向它的渲染DOM节点的引用。
    • forceUpdate()当你知道一些很深的组件state已经改变了的时候,可以在该组件上面调用,而不是使用this.setState()

    更新: 组件被重新渲染,检查DOM是否应该更新;

  • componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较this.propsnextProps,然后使用this.setState()来改变state。
  • shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数,优化this.propsnextProps,以及this.statenextState的比较,如果不需要React更新DOM,则返回false。
  • componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()
  • componentDidUpdate(object prevProps, object prevState)在更新发生之后调用。

    移除: 组件从DOM中移除;

  • componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。

 

分享到:
评论

相关推荐

    react-component-updating-lab-dumbo-web-051418

    描述在React组件生命周期的更新阶段会发生什么 简要介绍React Ref及其在组件生命周期中的作用 练习使用shouldComponentUpdate和componentDidUpdate 。 概述 在以前的实验室中,我们开发了MultiTimer应用程序,该应用...

    react-component-updating-lab-v-000

    描述在React组件生命周期的更新阶段会发生什么 简要介绍React Ref及其在组件生命周期中的作用 练习使用shouldComponentUpdate和componentDidUpdate 。 概述 在以前的实验室中,我们开发了MultiTimer应用程序,该应用...

    react-component-updating-lab-rcdd_202104_tur_few

    React:组件安装和卸载目标描述在React组件生命周期的更新阶段会发生什么简要介绍React Ref及其在组件生命周期中的作用练习使用shouldComponentUpdate和componentDidUpdate 。概述在以前的实验室中,我们开发了...

    react-component-updating-lab-online-web-sp-000

    描述在React组件生命周期的更新阶段会发生什么 简要介绍React Ref及其在组件生命周期中的作用 练习使用shouldComponentUpdate和componentDidUpdate 。 概述 在以前的实验室中,我们开发了MultiTimer应用程序,该应用...

    java体育用品源码-react-spike:React尖峰

    组件生命周期 虚拟DOM 形式 JSX 构建应用程序 预编译的 JSX Flux 简介 属性和状态 Redux 简介 可重用组件 相关React工具 组合物 React路由器 活动 测试 React 组件 受控组件 测试 Redux Reducers 实验室设置 首先...

    用于React的无限制下拉组件。

    特性 完全不受约束(不强制执行任何样式) 生命周期功能,允许在下拉列表关闭之前进行动画等操作 由于它不受约束,您可以将任何元素转换为下拉触发器,将任何元素转换为下拉菜单。 包括用于打开、关闭和设置关闭前...

    The-React-Workshop:一种新的交互式React学习方法

    熟悉React生命周期中的重要方法和事件 区分类和功能组件语法 使用Formik创建表单并处理错误 了解React Hooks API及其可以解决的问题 使用Axios库获取外部数据,然后将数据填充到应用程序中 相关工作坊 如果您发现此...

    TeachingReactApp:为了教授React的基础知识,请举一些例子

    组件生命周期。 this.state及其更改意味着什么。 带有BrowserRouter的ReactRouter,带有路由的Switch,并引用this.props.location来导出组件逻辑的位置。 容器组件模式,带有一个根容器,在页面上带有一个子容器...

    Learn-React-with-TypeScript-3:了解由Packt发布的React with TypeScript 3

    通过TypeScript 3学习React 这是Packt发布的的代码存储库。... 创建使用钩子处理生命周期事件的基于状态的基于功能的组件 通过执行基本查询以熟悉GraphQL,了解GraphQL以及如何使用它 如果您觉得这本书

    LearnReact17WithTypeScript

    通过TypeScript 3学习React 这是Packt发布的的代码存储库。... 创建使用钩子处理生命周期事件的基于状态的基于功能的组件 通过执行基本查询以熟悉语法,了解GraphQL以及如何使用它 如果您觉得这本书适合您,请

    google-book-search:一种Google图书搜索应用程序,允许用户搜索和保存图书。 使用了React前端和完整的MERN堆栈

    React生命周期方法有助于查询和显示用户搜索的部分内容。 Node,Express和MongoDB帮助保存了一本书,并最终在以后购买。 使用的技术: MongoDB-( ) 引导程序-( ) React-( ) 节点JS-( ) Express-( )...

    Vue.js面试题.pdf

    5. Vue.js中的生命周期钩子函数有哪些?它们分别在何时被调用? 6. Vue.js中的computed属性和watch属性有何区别?分别适用于哪些场景? 7. Vue.js中如何进行路由导航?请简要描述Vue Router的基本用法。 8. Vue.js中...

    flight-toolbox:官方飞行混搭的出发点

    用于将创建作为可观察序列公开(使用RxJS) 帮助在组件生命周期的上下文中管理可观察对象的订阅/处置(使用RxJS)。正在开发什么? 我们在开发的各个阶段都有mixin。 请查看各个存储库问题以贡献代码或文档。 用于...

    MERN-LOGIN-SIGNUP-BOILERPLATE:登录注册系统

    Express:后端Web应用程序框架Nodejs跨平台JavaScript运行时环境React:一个用于构建用户界面JavaScript库,用于使用React及其组件以及向类中添加生命周期方法。 使用JWT身份验证bcrypt来哈希密码userdata和令牌时...

    Asteracea:[WIP但有功能] Rust的Web应用程序框架。 Asteracea可用于客户端和服务器端渲染以及静态渲染和部署的站点(及其组合),而无需对应用程序代码进行特定更改

    菊科 Asteracea是一个Web应用程序框架,旨在结合和的优势,同时完全支持Rust的生命周期模型。 注意:Asteracea是实验软件。 尽管到目前为止看起来效果很好,但是可能会对模板语法进行重大更改。安装请使用始终添加此...

Global site tag (gtag.js) - Google Analytics