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

相关文章

来自专栏从零开始学 Web 前端

Sublime Text3 一些实用设置

当你把脑袋扭过到显示器以外的地方后再回头看编辑器,光标呢?然后你可能会花点小功夫找到他,就像你平时找鼠标的时候。这个设置会让让光标所处在的那一行高亮,只是稍微亮...

3512
来自专栏小古哥的博客园

微信小程序-开发入门(一)

微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应...

6305
来自专栏IMWeb前端团队

如何在前端编码时实现人肉双向编译

本文作者:IMWeb yisbug 原文出处:IMWeb社区 未经同意,禁止转载 如何在前端编码时实现人肉双向编译 React+flux是目前最火的前...

1915
来自专栏前端儿

[前端] 记录工作中遇到的各种问题(Bug,总结,记录)

而AjaxFileUpload插件的上传文件处理方式是,获取返回的实体内容,直接进行eval 解析,解析失败,报错,则无法上传

1.6K1
来自专栏Web 开发

新浪SAE伪域名绑定

弄完之后,再到WP4SAE里面把域名设置成自己绑定的那个域名,就实现了伪域名绑定了~

873
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 混合开发(iOS篇)

在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由R...

1.8K5
来自专栏weixuqin 的专栏

sublime下让代码居中

39313
来自专栏娱乐心理测试

xcode 9以后导入图片遇到显示不出的问题

2382
来自专栏前端小叙

react跳转url,跳转外链,新页面打开页面

在页面中给一个按钮绑定绑定跳转,如果跳转到项目的路由,引入react-router的Link

5471
来自专栏前端儿

微信小程序 - 入门指引

设置 -> 开发者设置 -> 服务器域名中   配置好服务器域名,小程序才能正确地发起异步请求

9471

扫码关注云+社区

领取腾讯云代金券