React面试题

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

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

注意事项:

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

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

 

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

(1)父与子通信

借助于属性   往下传值

传值:

<son  myName="123"></son>

接收值:

this.props.myName

(2)子与父通信

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

①定义有参数的方法

rcvMsg(msg){}

②传递给子组件

<son  funcRcv={this.rcMsg}></son>

③子组件来调用

This.props.funcRcv(123)

 

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

This.props.children

 

4.组件的生命周期

mount:

    componentWillMount

    componentDidMount

update

    componentWillUpdate

    componentDidUpdate

    componentWillReceiveProps

unmount:

   componentWillUnmount

 

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

(1)判断

短路逻辑

{  expression  && <Any></Any> }

(2)循环

遍历集合

this.state.list

      .map((value,index)=>{   

         return <li  key={index}>

                         {value}

                    </li>

    })

 

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 ***

}

 

<FlatList   data={[1,2,3]}  renderItem="showItem">

 

</FlatList>

 

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

可以使用c3中的flexbox