React 10道面试题

1.什么是jsx语法，有什么特点

jsx是javascript与html混合的一种模板语法，需要通过babel转换为js后方可在浏览器中执行

• 只有一个根节点
• 数组可以放html
• class为className
• style对象可以展开
• {}书写js
• {/**/}书写注释

2.写一个案例实现react表单的双向绑定

<input value="this.state.msg" onClick={
    
    e=>this.setState({
    
    msg:e.tatge})}

3.写一个react受控组件

import {
    
    createRef} from 'react'

this.inpRef = createRef();

<input ref={
    
    this.inpRef}>

this.inpRef.current.value

4.写四个以上react hook内置方法

useState 使用状态
useEffect 使用副作用（模拟生命周期）
useLayoutEffect 使用视图效果
useRef 使用dom引用
useContext 使用上下文
useReducer 使用数据处理器
useMemo 使用缓存

5.写一个类组件

import React,{
    
    Component} from 'react'
export default class App extends Component{
    
    
	constructor(props);
		super(props)
		this.state={
    
    }
	}
	render(){
    
    return(<></>)}

6.react-router-dom 写四个以上组件

import{
	HashRouter, //哈希路由
	BrowserRouter as Router， //浏览器历史记录路由
	NavLink， //导航链接
	Link，// 链接
	Switch，//切换
	Prompt，//弹出
	Redirect，//重定向
	Route//路由容器
}

7.路由参数 match有哪些属性？

isExact 是否精确匹配
params 路由参数
path 路径
url 地址

8.路由参数 location有哪些属性

pathname 路径名
hash 哈希值
search 查询值
state 状态

9.路由参数 history有哪些属性

go
goBack 返回
goForward 前进
push 推入
replace 替换
length 长度

10.写四个以上的react生命周期

constructor 构造函数
static getDerivedStateFromProps
render
componentDidMount
shouldComponentUpdate
getSnapshotBeforUpdate
componentDiuUpdate
componentWillUnmount