React常见面试题

更新日期: 2018-05-26阅读: 3.5k标签: 面试

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
來源:简书  

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

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,

前端面试之webpack面试常见问题

什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?

每个 JavaScript 工程师都应当知道的 10 个面试题

多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。

37个JavaScript基本面试问题和解答

面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

js练习笔记:10道JavaScript题目

10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性

vue菜鸟从业记:没准备好的面试,那叫尬聊

面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。

毕业一年左右的前端妹子面试总结

把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习

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

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

一篇文章教会你面试中的小套路

面试,一个短时间内对某个人做出判断的测试。很多时候,工程师们只准备了相关的技术点,却没有对非技术的软实力部分做准备。而软实力的考察,不仅贯穿整个面试流程中,更在BOSS面和HR面中尤为关键。鉴于当前业界也没有特别契合的攻略文档,仅有有几篇文章还是HR写的,特有此文

点击更多...

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