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