React常见面试题

时间: 2018-05-26阅读: 2192标签: 面试

react中调用setState之后发生了什么事情?

  • React会将当前传入的参数对象与组件当前的状态合并,然后触发调和过程,在调和的过程中,React会以相对高效的方式根据新的状态构建React元素树并且重新渲染整个UI界面.
  • React得到的元素树之后,React会自动计算出新的树与老的树的节点的差异,然后根据差异对界面进行最小化的渲染,在React的差异算法中,React能够精确的知道在哪些位置发生看改变以及应该如何去改变,这样就保证了UI是按需更新的而不是重新渲染整个界面.

React中Element与Component的区别?

  • ReactElement是描述屏幕上所见的内容的数据结构,是对于UI的对象的表述.典型的ReactElement就是利用jsX构建的声明式代码片段,然后被转化为createElement的调用组合.
  • ReactComponent则是可以接收参数输入并且返回某个ReactElement的函数或者类.

在什么情况下会优先选择使用ClassComponent而不是FunctionalComponent?

组件需要包含内部状态或者使用到生命周期函数的时候使用ClassComponent,否则使用函数式组件


React中的refs属性的作用是什么?

Refs是React提供给我们安全的访问DOM元素或者某个组件实例的句柄,我们可以为元素添加ref属性然后在回调函数中接收该元素在DOM树中的句柄,该值会作为回调函数的第一个参数的返回.

class CustomerForm extends Component{
    handleSubmit = () => {
        console.log('Input Value:'+this.input.value);
    }
    render(){
        return (
            <form onSubmit = {this.handleSubmit}>
                <input type="text" ref={(input)=> this.input = input } />
                <button type="submit">Submit</botton>
            </form>
        )
    }
}

Input域中包含了一个ref属性,该属性的声明的回调函数会接收inout对应的DOM元素,我们将其绑定到this指针以便在其他的类函数中使用,refs并不是类组件的专属,函数式组件同样可以利用闭包的方式暂时存储其值.

function CustomerForm(handleSubmit){
    let inputElement ;
    return (
        <form onSubmit = {()=>handleSubmit(inputElement.value)}>
        <input type='text' ref={(input) => 
            inputElement = input 
        } />
        <button type="submit">Submit</botton>
        </form>
    )
}

React中keys的作用是什么?

Keys 是React在操作列表中元素被修改,添加,或者删除的辅助标识.

render(){
    return (
        <ul>
            {this.state.todoItems.map(({task,uid})=>{
                return <li key={uid}>{task}</li>
            })}
        </ul>
    )
}

在开发过程中,我们需要保证某个元素的key 在其同级元素中具有唯一性,在ReactDiff算法中React会借助元素的Key值来判断该元素是新创建的还是被移动而来的元素,React会保存这个辅助状态,从而减少不必要的元素渲染.此外,React还需要借助Key值来判断元素与本地状态的关联干洗,因此我们在开发中不可忽视Key值的使用.

如果你创建了类似于下面的 Twitter 元素,那么他相关的类定义是什么样子的?

<Twitter username='chuhan'>
    {(user)=> user === null ? <Loading /> : <Badage info = {user}>}
</Twitter>
import React,{Component,PropTypes} from 'react';
import fetchUser from 'Twitter';

class Twitter extends Component {
    //todo something
}

回调渲染模式(Render Callback Pattern),在这种模式中,组件会接收某个函数作为子组件,然后在渲染函数中以props.children进行调用.

import React ,{Component,PropTypes} from 'react';
import fetchUser from 'Twitter';

class Twitter extends Component{
    state = {
        user : null
    }
    satic propTypes = {
        userName.propTypes.String.isRequied
    }
    componentDidMount(){
        fetchUser(this.props.userName)
            .then((user)=>{
                this.setState({user})
            })
    }
    render(){
        return this.props.children(this.state.user)
    }
}

此模式的优势在于将父组件与子组件解耦,父组件可以直接访问子组件的内部状态而不需要再通过Props传递,这样父组件能够更为方便地控制子组件展示的UI界面.如果将原本展示的Badge替换为Profile,可以方便的修改回调函数来实现

<Twitter username="chuhan">
    { (user) => user === null }
</Twitter>


作者:Chummy楚寒
链接:https://www.jianshu.com/p/f3c162bb7dea
來源:简书  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/824

vue面试时需要准备的知识点

vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style

7 个开放式的 CSS 面试题及回答策略

不管你是面试官还是求职者,里面的思路都能让你获益匪浅。你用 CSS 多久了?你最喜欢的 CSS 功能是什么?你有没有把 CSS 与其他语言结合使用?你能告诉我一个让你学到新 CSS 技术的项目吗?

前端面试常见功能的简单实现

答案以实际面试为背景,一些细节会照顾不到,例如 promise 的实现只应对了简单的情况,这些基本满足面试,大家可以根据情况继续深入学习,例如 underscore 源码

CSS 面试知识点总结

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题,本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记,分享这份总结给大家,对大家对 CSS 的可以来一次全方位的检漏和排查

关于 Redis 缓存的几道典型面试题!

随着系统访问量的提高,复杂度的提升,响应性能成为一个重点的关注点。而缓存的使用成为一个重点。redis 作为缓存中间件的一个佼佼者,成为了面试必问项目。本文分享一下Redis几道常见的面试题:

程序员经典面试题:高并发系统,一般需要怎么做

高并发系统总是那么令人着迷,比如说双十一的抢购,比如说12306的抢票,都是非常经典的高并发的例子,也是非常大的挑战。对于开发这样系统的人来说,最怕的就是突发的流量,就好比河流突发大水而引发洪涝灾害一样

一道面试题引起的思考

对于具有固定格式的字符串,可以考虑使用正则表达式来识别和匹配。实现一个功能的时候,不要只考虑正常情况,要多考虑一些非正常情况,比如输入格式不对、用户不按套路来或者因为一些奇奇怪怪的事情报错。并且能对可预见的非正常情况做一个容错处理。

一位程序员妹纸讲述她是如何拿到美团offer的?

美团,我是在拉勾网上投的简历,之前也投过一次,简历都没通过删选,后来让学姐帮我改了一下简历,重新投另一个部门,获得了面试机会。

高级前端面试题汇总

面试的公司分别是:阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。以下是面试题汇总

20行实现一个Promise

在面试的时候,经常会有面试官让你实现一个Promise,如果参照A+规范来实现的话,可能面到天黑都结束不了。说到Promise,我们首先想到的最核心的功能就是异步链式调用,本篇文章就带你用20行代码实现一个可以异步链式调用的Promise。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!