react面试题（30个）

1.React Native相对于原生的ios和Android有哪些优势。
react native一套代码可以开发出跨平台app， 减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。等等

2.React Native的优点和缺点在哪里。
缺点：内存、转化为原生的

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

14.父传子，子传父数据传递方式。
props state refs 方面回答

15.请您简单介绍一下redux、mobx。
redux => action/reducer/store
mobx =>数据双向绑定
16. 高阶组件（HOC）
高阶组件是重用组件逻辑的一项高级技术。高阶组件并不是React API的一部分。高阶组件源自于React生态。具体来说，高阶组件是一个函数，能够接受一个组件并返回一个新的组件，例如Redux的connect函数。
17.HOC存在的问题：
1、组件的静态方法不会被传递，需要自行传递处理
2、refs不会被传递，应该避免此，或者用自定义属性传递
3、react-native-fetch-blob的POST请求不成功。
4、js传到原生端的函数(ios中叫block)只能执行一次，否则崩溃。

18.Es6中箭头函数与普通函数的区别？
1.普通function的声明在变量提升中是最高的，箭头函数没有函数提升
2.箭头函数没有this，arguments
3.箭头函数不能作为构造函数，不能被new，没有property,
4.call和apply方法只有参数，没有作用域

19.什么是闭包？闭包有什么危害？如何解决闭包带来的危害？

简单来说，闭包就是一个定义在函数内部的函数。因为js中存在作用域的问题，所以在函数内部定义的变量在函数外部是没有办法直接获取到。而闭包就是沟通函数内部和外部的桥梁，这样在函数外部接可以得到函数内部的值。并且闭包可以实现函数属性和方法的私有化。

20.介绍一下webpack
webpack是一个前端模块化打包工具，主要由入口，出口，loader，plugins四个部分。前端的打包工具还有一个gulp，不过gulp侧重于前端开发的过程，而webpack侧重于模块，例如他会将css文件看作一个模块，通过css-loader将css打包成符合css的静态资源。

21.react性能优化的方案
（1）重写shouldComponentUpdate来避免不必要的dom操作。
（2）使用 production 版本的react.js。
（3）使用key来帮助React识别列表中所有子组件的最小变化。

22.react中组件传值

父传子（组件嵌套浅）：父组件定义一个属性，子组件通过this.props接收。
子传父：父组件定义一个属性，并将一个回调函数赋值给定义的属性，然后子组件进行调用传过来的函数，并将参数传进去，在父组件的回调函数中即可获得子组件传过来的值。

23.vue和react的区别

1、react严格上针对的是mvc模式的view层，vue则是mvvm模式。
2、操作dom的方式不同，vue使用的是指令操作dom，react是通过js进行操作。
3、数据绑定不同，vue实现的是双向绑定，react的数据流动是单向的。
4、react中state是不能直接改变的，需要使用setState改变。vue中的state不是必须的，数据主要是由data属性在vue对象中管理的。

24.sass和less的区别

定义变量的符号不同，less是用@，sass使用$
变量的作用域不同，less在全局定义，就作用在全局，在代码块中定义，就作用于整哥代码块。而sass只作用域全局。
编译环境不同，less在开发者环境编译，sass在服务器环境下编译。

25.setState第二个参数的作用
因为setState是一个异步的过程，所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听，setState提供第二个参数，就是用来监听state里面数据的更改，当数据更改完成，调用回调函数。

26.运行阶段生命周期调用顺序
componentWillReceiveProps–>shouldComponentUpdate --> componentWillupdate --> componentDidUpdate

27.react中如何修改state中的数据？this.setState是同步的还是异步的？this.setState中的第二个参数的作用是什么？为什么是异步的？

1）通过this.setState来修改state中的数据；

2）this.setState是异步的；

3）其中有两个参数，第一个参数是一个对象或者是一个函数（必须返回一个对象），
函数中的第一个值为（prevState），第二个参数是（prevProps）
例：
this.setState((prevState,prevProps)=>({ }))

4）为什么是异步的，一位state可以批量执行，也就是说当多个setState一起同时执行时会被合并，提高DOM的渲染效率；

5）this.setState什么时候是同步的？原生js绑定的事件，setTimeout/setInterval等，（就是不受react机制控制时）

6）this.setState本身其实是一个同步的，异步不是因为本身的运行机制或者代码，而是因为他所在的合成事件和钩子函数的调用顺序在更新之前，导致函数内没法立即拿到更新后的值，形成了所谓的异步，可以通过第二个参数中的callback拿到更新后的结果；

28.react中常用的路由配置项？

BrowserRouter 路由根组件，路径不带#号history路由
HashRouter 路由根组件，路径带#号hash路由
withRouter 对非路由渲染的组件组件进行包裹，让其具备三个属性

Route 定义路由
Link 路由跳转，没有动态属性，使用场景，非tabBar
NavLink 路由跳转，有动态属性，使用场景，tabBar
Switch 路由渲染，被其包裹的组件只会被渲染一个，包裹时最好将子组件放在这个标签之外，父组件放在内部
Redirect 路由重定向

29、reatc路由中Route渲染组件的方法有哪几种？区别是什么？

1）component：使用component渲染的路由组件会有三个自带的属性，localtion、history、match，他的缺点是不可以进行传参，不可以渲染非组件标签；

2）render：使用render渲染的路由组件可以进行路由传参，可以渲染非组件标签，但是不具备三个属性，如果需要使用的话，需要传参传递进来；

30.react中路由传递参数的方法有哪些？

• 动态路由：

定义路由时：采用/😕:这种形式；

路由跳转时：路径+key形式；

接收：this.props.match.params；

• query传值：

定义路由时：与正常时相同；

路由跳转时：使用字符串拼接；

接收：this.props.location.search

• 对象传值：

定义路由时：与正常时相同；

路由跳转时：使用对象，内部包含定义路径的对象和传递参数的对象；

接收：this.props.history.query

• 编程式导航：

this.props.history.push({路径部分}，{参数部分})

注意：使用对象传值以及编程式导航传值时如果页面刷新，那么传递的值就会消失；

转:
https://www.cnblogs.com/qiqi715/p/10149320.html
https://www.cnblogs.com/sna-ling/p/12492297.html
https://segmentfault.com/a/1190000016885832
https://blog.csdn.net/xiaochunblog/article/details/85129378
https://www.cnblogs.com/Alex-Song/p/11483550.html