莫方教程网

专业程序员编程教程与实战案例分享

12>React常见基础面试题(附答案)

1. ReactJS中渲染根组件的方式以及注意事项

答案:

ReactDOM.render(A,B);将A渲染到B指定的容器中

注意事项:

不允许一次渲染多个标签,但是可以放在同一个顶层标签

每一个标记都要有对应的结束

2.ReactJS中父子组件通信的方式

(1)父与子通信

借助于属性 往下传值

传值:

接受值:

this.props.myName

(2)子与父通信

通过属性传递有参数的方法 让子组件调用是传值

①定义有参数的方法

rcvMsg(msg){}

②传递给子组件

③子组件来调用

This.props.funcRcv(123)

3.如何在组件渲染时调用组件内部嵌套的子组件

This.props.children

4.组件的生命周期

mount:

componentWillMount

componentDidMount

update:

componentWillUpdate

componentDidUpdate

componentWillReceiveProps

unmount:

componentWillUnmount

5.在组件渲染时 实现判断和循环功能

(1)判断

短路逻辑

{ expression && }


(2)循环

遍历集合

this.state.list

.map((value,index)=>{

return

  • {value}

  • })

    6.描述ReactNative的特点和开发理念

    ReactNative是实现原生开发的框架

    可以使用react的语法和js来编写

    开发理念:

    Learn once,write anywhere

    7、react中是如何处理网络通信的

    fetch(url).then((response)=>response.json()).then((result)=>{})

    8、react中循环创建多个组件时指定key的作用?

    在dom变化时 快速定位元素 提升更新效率

    9、react的生态圈(技术栈)中有哪些常见技术?

    reactjs、 reactNative、 react360 、flux、 redux、 ssr、 reactNavigation....

    10、基于reactNative的reactNavigation中的基础用法?

    跳转:

    this.props.navigation.navigate()

    传参:

    this.props.navigation.navigate(‘detail’,{id:10})

    this.props.navigation.getParam(‘id’)

    11、reactNative中如何实现一个高性能列表

    import {FlatList} from ‘react-native’

    showItem=(info)=>{

    return ****

    }


    12、reactNative中如何完成自定义布局?

    可以使用c3中的flexbox

    13、react的主要功能有哪些?

    ①使用虚拟DOM,而不是真正的DOM

    ②遵循单向数据流

    14、简述使用react的优缺点

    优点:

    ?提高了应用性能和开发效率;

    ?使用JSX,代码可读性好;

    ?react的componentWillUnmount生命周期,能够清除相关所有事件,避免内存泄露;

    ?并不直接对DOM进行操作,引入了一个虚拟DOM的概念,安插在js和真实DOM中间,性能好,速度快 。

    缺点:

    每次 state 更改,render 函数都要生成完整的虚拟 DOM. 哪怕 state 改动很小,render函数也会完整计算一遍。如果 render 函数很复杂,这个过程就白白浪费了很多计算资源。

    15、VUE与React两个框架的有哪些区别?

    相同点:

    ?用于创建UI的js库

    ?使用起来轻快便捷

    ?都用了虚拟DOM

    ?都是基于组件的架构

    不同点 :

    ?vue使用的html模板;react使用的是js;

    ?vue有双向绑定语法;

    ?vue增加了语法糖computed和watch等,react需要自己写逻辑来实现;

    ?react用了jsx语法;

    ?react整体思路是编程式,推荐组件化,数据不变,单向数据流;vue数据可变,双向绑定,声明式的写法。

    16、React中的key值的作用是什么?

    key是用于追踪那些列表中元素被修改,删除或者被添加的辅助标识。在diff算法中,key用来判断该元素节点是被移动过来的还是新创建元素,减少不必要的元素重复渲染。

    17、render函数什么时候会执行?

    当this.setState发生变化时就会更新。

    18、this.setState执行后会执行哪些生命周期函数?

    shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate...

    19、call、apply、bind三者之间的区别?

    call和apply都是直接调用函数的;

    bind每次调用执行的时候都会返回一个新的函数体,新的函数体内部的this指向才是我们需要改变指向的this。

    20、如何控制路由的路径完全匹配?

    在NavLink或者Route标签中添加exact属性,是路径完全匹配。

    控制面板
    您好,欢迎到访网站!
      查看权限
    网站分类
    最新留言