专栏首页前端大白专栏reactjs不常见的面试提要

reactjs不常见的面试提要

直接上内容:

首先是首页结构:

<div>
  <C/>
  <B>
    <E/>
    <D/>
  </B>
</div>

在index中有3个子组件,在3个组件的生命周期componentWillMount与componentDidMount调用顺序:

问的有些水平至少我用react这么长时间,从来没有考虑过这类问题.

首先先说结果:在控制台打印为:

和自己面试回答的结果是一样的.

首先需要提及的是js是顺序执行的,

componentWillMount是在挂载前执行的,这里会把所有的需要挂载的虚拟的dom挂载完成,也就是说只能先从父组件开始,打印的便是father > c > b > e >d;c与d的执行顺序则是按照js顺序执行的顺序来的

当所有组件的componentWillMount都执行完了之后,接下来是走下一个生命周期:componentDidMount:

这个生命周期与componentWillMount不同的是,最外层的父组件是最后执行componentDidMount的,因为需要渲染到浏览器了,所以父组件得放到最后一个执行,顺序找子组件,第一个找到的便是c,它先执行componentDidMount,然后到b,发现b里有组件,这样通过一层一层的递归形式便可以完成渲染到浏览器的一个过程,当然了,react内部的具体实现我没有具体去看过,我想fb设计的思路应该就是这样的.

OK,这个问题过了.

接下来第二个问题:

传值:

依然是上面的数据结构:我有一个值是在c组件里的,需要传递给b组件里的d组件里?

这个就不难了,可以通过中间组件b来传递,当然了最好的方式便是react-redux或者mobx;具体的实现过程略略略...

第三个问题:

组件render的问题:现在在父组件里有一个定时期不断更改页面的内容代码如下:

import React,{Component} from 'react';
import { connect } from 'dva';
import B from '../b/a'
import C from '../c/c'
import D from '../d/d'
import E from '../e/e'
class IndexPage extends Component{
  constructor(props){
    super(props);
    this.state={
      time2:11,
      timer:null
    };
  }

  componentDidMount(){
    console.log('father');
    let time2 = this.state.time2;
    setInterval(()=>{
      this.setState({
        time2:time2++
      })
    },2000)
  }
  componentWillMount(){
    console.log('will father')
  }
  render(){
    return(
      <div>
        <span>{this.state.time2}</span>
        <C/>
        <B>
          <E/>
          <D/>
        </B>
      </div>
    )
  }
}


export default connect()(IndexPage);

以上代码仅为示例,如果实际中用到setInterval一定要在unMount中卸载;

问:子组件B,C,D,E是否会调用render方法;

首先看结果:

这里涉及到一个术语reconciliation,你可能会觉得这样不是很傻吗,我又没有传递属性给子组件,那父组件更新会触发所有后代组件的重渲染过程不是很低效且没有意义吗?但是React不能检测到你是否给子组件传了属性,所以它必须进行这个重渲染过程(术语叫做reconciliation)。但是这不会使得react有多低效,因为reconciliation过程是执行的JavaScript,而重渲染的性能开销主要是更新DOM导致的,最后diff算法会介入,决定是否要真正更新DOM,JavaScript的执行速度很快的,所以即使父组件render会触发所有后代组件的render过程(reconciliation过程),这个效率也不会有太大影响。

然后又提及到了Component与pureComponent的区别:

pureComponent中的shouldComponentUpdate是帮你做了一层浅比较是,类似下面的代码:

function shouldComponentUpdate(nextProps, nextState){
    const cProps = this.props, cState = this.state;
    for(let key in nextProps){
        if(cProps[key] !== nextProps[key]) return true
    }
    for(let key in nextState){
        if(cState[key] !== nextState[key]) return true
    }
    
    return false;
}

pureComponent为什么使用:当组件更新时,如果组件的 props 和 state 都没发生改变, render 方法就不会触发,省去 Virtual DOM 的生成和比对过程,达到提升性能的目的.

而Component中没有进行这样的比较,也是可以在Component中添加上述的代码也便能实现.

人嘛,总是慢慢的成长的!感觉自己回答的一般+吧!面了1个多小时!感谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

    杭州前端工程师
  • antd使用后的一些感受

    杭州前端工程师
  • react dva如何获取被form包裹的子组件函数

    杭州前端工程师
  • iOS组件化设计与开发

    首先我觉得”组件”在这里不太合适,因为按我理解组件是指比较小的功能块,这些组件不需要多少组件间通信,没什么依赖,也就不需要做什么其他处理,面向对象就能搞定。而这...

    進无尽
  • 根据公司的业务需求我是如何封装组件的

    作者:lin1997 原文链接:https://juejin.im/post/6888125003024629768

    coder_koala
  • react-02

    用户2337871
  • 可重用性的6个级别

    这是有关级别的基本概述。我即将举行的课程“ 可重用组件 ”探讨了每个组件以及如何充分利用它们。

    公众号---志学Python
  • 对于组件的可重用性,大佬给出来6个级别的见解,一起过目一下!

    我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。

    前端小智@大迁世界
  • 企业 SOA 设计(2)–组件化产品开发平台

    上一篇《企业 SOA 设计(1)–ESB 设计》中,写到我们的 SOA 设计分为两个层面来进行:一个是系统间的 SOA 设计,主要通过 ESB 来完成;另一方面...

    用户1172223
  • vue之组件边界情况处理

    在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。

    开发架构二三事

扫码关注云+社区

领取腾讯云代金券