React类型检查

Posted 2021-01-03 2oex

类型检查

import PropTypes from ‘prop-types‘

类名==List
List.propTypes = {
    list: PropTypes.array
}

// 默认值
List.defaultProps = {
    list:[]
}

props:

1.只读不能修改（不能再赋值表达式左边）
    2.ComponentWillReceiveProp()
    3.propTypes
    4. defaultProps
    5.children

web > native

native 需要下载安装包
// react-router-dom

web  直接有的
//react-router-native

nvm

命令	说明
nvm list available	查看所有版本
nvm install 版本号	下载
nvm list	列出当前可用的包
nvm use 版本号	使用哪一个包
history	历史

路由模式

Vue使用hash模式
React 使用两种模式

HashRouter
# 哈希模式(HashRouter)  锚点 

浏览器端忽略#（无法把#及之后带过去）

browserRouter 
    路由localhost地址
    访问地址不存在，进行重定向
    
Node起服务

路由

1.下载 react-router-dom

2.
import {
    HashRouter as Router,
    Link,
    Route,
    Switch
} from ‘ react-router-dom‘

3.<Router></Router>

<Switch>

    //当route不给path属性时会匹配任意路由
    <Router component={()=><h1>未匹配的路由</h1>}></Router> 无path匹配任何路由
    
    当redirect不给from属性时也会匹配任意路由
    <Redirect exact from=‘/‘ to=‘/index‘></Redirect>
</Switch>


Link, //导航标签 to属性声明要跳转的路径
Route,//占位标签，如果path与当前路径一模一样时才匹配
Switch // 返回匹配的第一个路由
exact 表示精准匹配，当path与当前路径一模一样时才匹配

传参

1.地址栏传参
‘/index/:id?‘ 传递变量
‘/index/10‘ 传递常量
‘/index?a=1&b=2‘ 直接传递数据

Link 标签的to属性
    to={{
        pathname:‘/cart‘,
        data:{a:1,b:2}
    }}
// 在location接收

回退版本

window.history.go(-1)

window.history.back()

透传

a => b => c
b只能接收a的值不能修改a的值

replace

有两种常见的渲染组件的方式：

component和render。前者是使用React.createElement方法新建一个元素，而后者仅仅是调用现有组件的render方法