react-1.6

1.6考试

1. 什么是jsx语法，有什么特点
2. 写一个案例实现react表单的双向绑定
3. 写一个react非受控组件获取表单的值
4. 写4个以上react hook内置方法
5. 写一个类组件
6. react-router-dom 写4个以上组件
7. 路由参数 match有哪些属性
8. 路由参数 location有哪些属性
9. 路由参数 history有哪些属性
10. 写4个以上的react生命周期

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

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

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

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

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

写一个react非受控组件获取表单的值

import {createRef} from 'react'

this.inpRef = createRef();

<input ref={this.inpRef}>

this.inpRef.current.value

写4个以上react hook内置方法

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

写一个类组件

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

react-router-dom 写4个以上组件

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

路由参数 match有哪些属性

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

路由参数 location有哪些属性

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

路由参数 history有哪些属性

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

写4个以上的react生命周期

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