react 基础 (三)

react生命周期 reactHook 路由 路由props

react生命周期

  • 挂载
constructor构造函数
static getDerivedStateFromProps监听porps更新state
render渲染
componentDidMount 组件已经挂载
  • 更新
	static getDerivedStateFromProps 监听porps更新state
	shouldComponentUpdate(nextProps,nextState){} 组件是否更新
	render渲染函数
	getSnapshotBeforeUpdate() 更新获取快照返回的数据是 cdu 的第三个参数
	componentDidUpdate 组件已经更新
  • 卸载
	componentWillUnmount 组件将要卸载

reactHook

  • useState使用状态

const [num,setNum] = useState(10)
  • useEffect模拟生命周期

第一个参数回调函数:模拟组件已经挂载完毕,
第一个参数的返回值:模拟组件将要卸载
第二参数:依赖数据

  • useRef使用Dom引用

const inpRef = useRef()
<input ref-{inpRef}>
inpRef.current.value
  • useCallback使用回调缓存
  • 执行一个函数
  • useMemo使用缓存(返回一个函数)
  • useLayouteffect视图发生变化
  • useReducer集中数据管理器(模拟reduce)
  • useContext使用上下文(跨层级传参)
  • createContext创建上下文

路由

  • 安装

npm i react-router-dom@5.0 -S
  • 组件

  • BrowserRouter浏览器路由
    HashRouter哈希路由
  • NavLink导航链接
    exact精确匹配
    to链接地址
    class="active"匹配状态
  • Route路由容器
    exact精确匹配
    (路径和配置的path完全匹配)
    path路由地址
    component组件
  • <Redirect重定向
    to 去哪儿
    from 从那
  • <Switch匹配一个路由
  • <Primpt路由离开调用弹框
    when当条件为真
    message弹出文本内容
  • <Link跳转
to="/login"
to={{
pathname:' "/login",
search:"name=mumu&age=18",
hash:" #good",
state:{redirect:" xxx"}
}}
参数props里面的location-致的
  • 404
    Switch包裹(一次匹配一个)
    path="*"
    配置放在最后面
  • 路由的参数
path="produce/:id"
切换to=*/produce/abc"
获取: props.match.paramsid
  • 子路由
在主路由添加
<div>
      <Route path="/admin/dash" component={Dash}></Route>
      <Route path="/admin/orderlist" component={OrderList}></Route>
        {/* 重定向 */}
      <Redirect path="/admin" to="/admin/dash"></Redirect> 
</div>

路由props

  • match 匹配的路由
    params路由的参数
    isExact是否精确匹配
    path路径
    url地址
  • history历史记录
    push 跳转
    replace 替换历史记录
    go 跳转历史记录
    goBack 返回
    goForward 前进
    linsten 监听
    location 同 location
    length 长度
  • location 地址栏信息
    hash哈希值
    pathname地址名称
    search查询信息
    state跳转传入参数
  • 只有Route对应的component才有这三个自动注入参数
上一篇:vue组件的创建与使用


下一篇:react router