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

答案：

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

注意事项:

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

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

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

(1)父与子通信

借助于属性 往下传值

传值:

<son myName=”123”></son>

接受值:

this.props.myName

(2)子与父通信

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

①定义有参数的方法

rcvMsg(msg){}

②传递给子组件

<son funcRcv={this.rcvMsg}></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

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属性，是路径完全匹配。