3.React面试真题演练

# 1.组件之间如何通讯

父子组件props
自定义事件
Redux和Context

# 2.JSX本质是什么

createElement
执行返回vnode

# 3.Context是什么？如何应用

父组件，向其下所有子孙组件传递信息
对一些简单的公共信息：主题色、语言等
复杂的公共信息，请用redux

# 4.shouldComponentUpdate用途

性能优化
配合“不可变值”一起使用，否则会出错

# 5.redux单项数据流

# 6.setState场景题

componentDidMount() {
	//count 初始值为 0
	this.setState({ count: this.state.count + 1 }) 
    console.log('1', this.state.count) // 0
	this.setState({ count: this.state.count + 1 }) 
    console.log('2', this.state.count) // 0
	setTimeout(() => {
		this.setState({ count:this.state.count+1}) 
        console.log('3', this.state.count) // 2
	})
	setTimeout(() => {
		this.setState({ count: this.state.count + 1 }) 
    	console.log('4', this.state.count) // 3
	})
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 7.什么是纯函数

返回一个新值，没有副作用（不会“偷偷”修改其他值）
重点：不可变值，如arr1 = arr.slice()

# 8.React组件生命周期

单组件生命周期
父子组件生命周期
注意SCU

# 9.React发起ajax应该在哪个生命周期

同Vue
应在componentDidMount发起

# 10.渲染列表，为何使用key

同Vue，必须用key，且不能是index和random
diff算法中通过tag和key来判断，是否是sameNode
减少渲染次数，提升渲染性能

# 11.函数组件和class组件区别

函数组件是纯函数，输入props，输出JSX
函数组件没有实例，没有生命周期，没有state
函数组件不能扩展其他方法

# 12.什么是受控组件

表单的值，受state控制
需要自行监听oChange，更新state
对比非受控组件

# 13.何时使用异步组件

同Vue
加载大组件
路由懒加载

# 14.redux如何进行异步请求

使用异步action
如redux-thunk

# 15.react-router如何配置懒加载

# 16.PureComponent有何区别

实现了浅比较的shouldComponentUpdate
优化性能
但要结合不可变值使用

# 17.React事件和DOM事件的区别

所有事件都挂载到document上（React 17后React事件绑定到 root 组件上）
event不是原生的，是SyntheticEvent合成事件对象
dispatchEvent

# 18.React性能优化

渲染列表加key
自定义事件、DOM事件及时销毁
合理使用异步组件
减少函数bind this的次数
合理使用SCU PureComponent和memo
合理使用Immutable.js
webpack层面的优化（后面会讲）
前端通用的性能优化，如图片懒加载
使用SSR

# 19.React和Vue的区别

都支持组件化
都是数据驱动视图
都使用vdom操作DOM
React使用JSX拥抱JS,Vue使用模板拥抱html
React函数式编程，Vue声明式编程
React更多需要自力更生，Vue把想要的都给你

#面试 #React

← 2.React原理 4.React Hooks→