美文网首页
react生命周期和基本问题总结

react生命周期和基本问题总结

作者: 唯有她美 | 来源:发表于2019-02-19 20:08 被阅读0次

react生命周期分为3个阶段

1.初始化(实例化阶段,只执行一次)

2.更新(存在阶段,是可以反复执行的)

3.销毁(销毁阶段,只执行一次)

初始化(实例化阶段,只执行一次)

1.getDefaultProps()(es5)

设置默认props,也可以设置props的默认属性

2.getInitialState()(es5)

es5的钩子函数,es6没有这个钩子函数,在es6中使用class创建 (class 组件名 extends React.Component)在constructor中设置this.state={里面设置初始化的状态}

3.componentWillmount()

在渲染DOm之前调用一次,也是最后一次机会可以更新state的时刻(只调用一次)

4.render()

创建虚拟DOM,通过DiFF算法,更新DOM树。只能通过this.state或this.props访问数据

不能修改DOM的输出,不能修改组件的状态,可以返回null,false,或者任意一个组件,

只能有一个顶级组件

5.componentDidMount()

在更新DOM树之后调用一次,可以通过this.getDOMNode()获取真实的DOM元素。

.更新(存在阶段,是可以反复执行的)

6.componentWillReceiveProps()

初始化时不调用,组件接受新的Props时调用,在这里可以更新组件的props和state

7.shouldComponentUpdata()

当props或state更新时,判断是否渲染新的props和state,返回false时,下面的周期不在执行,通常不需要使用,避免BUG的出现,在出现应用的瓶颈或者需要优化时,可以进行适当的应用。

8.render()同初始化时一样

9.componentDidUpdata()

完成新的渲染时调用,在这里可以获得更新后的DOM元素

销毁(销毁阶段,只执行一次)

10.componentUnmount()

组件被销毁之后调用,可以做一些清理,在componentDidMount()添加的任务都需要在这里撤销,比如一些定时器或者创建的监听器

当调用了setState时发生什么事?

当调用setState后,会把当前传入的参数与当前状态合并,然后触发调和过程,通过调和过程,react会以高效的方式构建DOM树,并且重新渲染整个UI界面,在react渲染DOM树后,react会自动计算出新的DOM树和老的DOM树之见的差异,根据差异以最小化进行渲染。react能精准的判断出那些发生了变化并来应对这些变化,从而达到按需更新,而不是全部更新。

在react中Element和Component有什么区别?

React Element是描述你在屏幕上看到的数据结构,是对UI对象的表述,典型的React Element就是通过典型的JSX构建的代码片段被转化成cerateElement的调用组合。React Component则是接受参数输入,返回React Element的的函数或者类

在什么情况下你会优先选择Class Component,而不是Function Component(函数式组件)

在组件需要包含生命周期或者状态时,我们需要使用Class Component,否则使用Function Component

react中refs的作用是什么?

它允许你直接访问DOM元素或实例,为了使用它们,你可以直接在组件中添加一个ref的属性,该属性的值是一个回调函数,它将接受底层的DOM元素或者已挂载的实例,作为第一个参数。

react中keys是什么,为什么要使用它们?

key是独一无二的,它主要用来跟踪哪些项目更改,删除,添加

相关文章

  • react生命周期和基本问题总结

    react生命周期分为3个阶段 1.初始化(实例化阶段,只执行一次) 2.更新(存在阶段,是可以反复执行的) 3....

  • VUE V.S. React 生命周期对比

    参考文章:vue生命周期和react生命周期对比

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React生命周期

    React v16.0前的生命周期 React v16.4+ 的生命周期图 React v16.9后这些生命周期钩...

  • Flutter 生命周期

    在之前的一篇文章 React 生命周期 是我在学习 React 之初总结的,那么现如今正处于学习 Flutter ...

  • React 组件的生命周期

    书籍《深入浅出React和Redux》 组件生命周期 React 组件生命周期可能会经历如下三个过程: 装载过程(...

  • React v16 生命周期

    React 16 生命周期 React 16.3 新增的生命周期方法 逐渐废弃的生命周期方法: 一般将生命周期分成...

  • 学习并实现react (4)

    实现生命周期 生命周期介绍 React 生命周期图 React 子组件在父组件下的生命周期流程 实现 compon...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

网友评论

      本文标题:react生命周期和基本问题总结

      本文链接:https://www.haomeiwen.com/subject/bawcdftx.html