美文网首页
2019-05-04 React 生命周期

2019-05-04 React 生命周期

作者: 追夢的蚂蚁 | 来源:发表于2019-05-09 17:15 被阅读0次

    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

    相关文章

      网友评论

          本文标题:2019-05-04 React 生命周期

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