1. ReactJS中渲染根组件的方式以及注意事项
答案:
ReactDOM.render(A,B);将A渲染到B指定的容器中
注意事项:
不允许一次渲染多个标签,但是可以放在同一个顶层标签
每一个标记都要有对应的结束
2.ReactJS中父子组件通信的方式
(1)父与子通信
借助于属性 往下传值
传值:
接受值:
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 &&
(2)循环
遍历集合
this.state.list
.map((value,index)=>{
return
{value}
})
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 ****
}
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属性,是路径完全匹配。