类型检查
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方法