2019-05-04 React 生命周期

vanillaJS例子
react生命周期例子

1.请求数据(ajax)
2.更新数据(setState)
3.事件监听(onclick)
4.初始化state

:初始化state放在construct里面
代码里可以setState的为:
onclick,
componentDidMount,
componentWillReceiveProps


生命周期面试题整理

1.react 生命周期函数(9个)
初始化阶段:
componentWillMount:组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
construct
运行中状态:
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段:
componentWillUnmount:组件即将销毁

2.shouldComponentUpdate 是做什么的,(react 性能优化是哪个周期函数?)

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能,如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。

should为什么这么重要?
1should可以自定义是否更新组件
2通过should优化更新效率

3.在生命周期中的哪一步你应该发起 AJAX 请求?````
1用户点击时,2越早越好
放construct里和componentDidMount,
但是construct中不能使用setState.
原因是:Fiber有了调度render执行顺序的能力,所以componentWillMount方法的执行变得不确定

4.setState合并状态后的几个生命周期函数的调用顺序?(用户点击一个按钮,你调用setState时会更新哪几个钩子?)
shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,695评论 1 33
  • 生命周期流程图简单如下: 组件让你把用户界面分成独立的,可重复使用的部分,并且将每个部分分开考虑。React.Co...
    Simple_Learn阅读 4,741评论 0 0
  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 11,811评论 7 41
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 4,700评论 0 1
  • React 生命周期 React生命周期主要包括4个阶段: 初始化阶段 实例化阶段 更新阶段 销毁阶段 1 设置组...
    Android_冯星阅读 3,890评论 0 1

友情链接更多精彩内容