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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

channel机理及调度理解

《Go语言编程》一书介绍了libtask库,可以认为这个库等同于go的底层goroutine实现。

873
来自专栏一“技”之长

iOS开发UINavigation系列二——UINavigationItem

        UINavigationItem是导航栏上用于管理导航项的类,在上一篇博客中,我们知道导航栏是通过push与pop的堆栈操作来对item进行管理...

892
来自专栏月牙寂

k8s源码分析-----kubectl(3)主要框架

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

4364
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

4795
来自专栏游戏开发那些事

【Unity游戏开发】SDK接入与集成——小白入门篇

  通常一款游戏开发到后期,一般都会涉及到第三方SDK的接入与集成,对于不熟悉SDK接入的同学来说,接SDK每次都是云里雾里,而熟悉SDK接入的同学又觉得不断地...

1362
来自专栏大前端_Web

前端路由相关实现

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

562
来自专栏Google Dart

AngularDart 4.0 高级-生命周期钩子 顶

Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。

811
来自专栏潇涧技术专栏

Art of Android Development Reading Notes 13

《Android开发艺术探索》读书笔记 (13) 第13章 综合技术、第14章 JNI和NDK编程、第15章 Android性能优化

822
来自专栏IT笔记

SpringMvc+Velocity的一些配置总结

前言 公司用了许久的struts2+hibernate,前两年时间SpringMvic+Shiro也有做过,大多都是基于JSP实现的界面展示层,最近一段使用使用...

3377
来自专栏分享达人秀

日历视图CalendarView和定时器Chronometer

上一期学习了AnalogClock、DigitalClock和TextClock时钟组件,本期继续来学习日历视图CalendarView和定时器Chro...

1806

扫码关注云+社区