react生命周期 reactHook 路由 路由props

• react生命周期
• reactHook
• • useState使用状态
  • useEffect模拟生命周期
  • useRef使用Dom引用
• 路由
• • 安装
  • 组件
• 路由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才有这三个自动注入参数