react（三）

最新推荐文章于 2024-09-30 15:23:15 发布

蒂芬

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量296

点赞数 1

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/L58656231/article/details/122334040

版权

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

2. reactHook
在函数组件里面模拟生命周期和状态state
useState使用状态 const [num,setNum] = useState(10)
useEffect模拟生命周期
(1) 第一个参数回调函数:模拟组件已经挂载完毕，组件更新完毕
(2) 第一个参数的返回值:模拟组件将要卸载 ,第二参数:依赖数据
useRef 使用Dom引用

const inpRef = useRef()<input ref={inpRef}
  inpRef.current.value

useCallback使用回调缓存执行一个函数
useMemo使用缓存(返回一个函数)
useLayoutEffect视图发生变化
useContext 使用上下文(跨层级传参)createContext创建上下文

3. 路由

安装 
npm i react-router-dom@5.0 -S

组件
BrowserRouter 浏览器路由
HashRouter 哈希路由
NavLink 导航链接
exact精确匹配
to 链接地址
class="active" 匹配状态
Route 路由容器
exact精确匹配（路径和配置的path完全匹配）
path 路由地址
component 组件
重定向
to 去哪儿
from 从那
<Switch> 匹配一个路由

<Prompt>路由离开调用弹框
<Prompt>
路由离开调用弹框  
message 弹出文本内容

跳转

<Link>
跳转
to="/login"
to={{
pathname:"/login",
search:"name=mumu&age=18",
hash:"#good",
state:{redirect:"xxx"}
}}

404

1.Switch 包裹（一次匹配一个）
2. path="*"
3. 配置放在最后面

路由的参数


	path="produce/:id”
	切换 to=“/produce/abc”
	获取：props.match.params.id

子路由

子路由在主路由添加
  <div>
          <Route path="/admin/dash" component={Dash}></Route>
          <Route path="/admin/orderlist" component={OrderList}></Route>
          {/* 重定向 */}
          <Redirect path="/admin" to="/admin/dash"></Redirect>
       </div>