前端面试题react

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

答案： ReactDOM.render(A,B);将A渲染到B指定的容器中 注意事项: 不允许一次渲染多个标签，但是可以放在同一个顶层标签 每一个标记都要有对应的结束

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

(1) 父与子通信 借助于属性 往下传值 传值: son myName=”123”></son. 接受值: 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 && <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