react2-高阶组件与路由_react 高阶组件 路由(1)

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

React.useEffect(回调函数，可选的依赖项)

  /\*\*
 \* Effect Hook
 \*/
  useEffect(() => {
    console.log('未传递第二个参数...') // 每次组件渲染，那会执行回调函数
  })

  // componentDidMount()
  useEffect(() => {
    console.log('传递第二个参数为空数组...') // 组件挂载执行一次回调函数

    // componentWillUnmount()
    return () => {
      console.log('销毁')
    }
  }, [])

  // componentDidMount() + componentDidUpdate()
  useEffect(() => {
    // 组件挂载及依赖项更新时执行回调函数
    console.log('传递第二个参数为数组，添加 todos 依赖项...')
  }, [todos])

实例：

import React,{useState,useEffect} from "react";
function Example(){
    const [count,setCount]=useState(0)
    useEffect(()=>{
        document.title=`you clicked ${count} times`
    })
    return(
        <div>
            <p>you clicked {count} times</p>
            <button onClick={()=>setCount(count+1)}>click me </button>
        </div>
    )
}
export default Example

useCallback

1. 该回调函数仅在某个依赖项改变时才会更新,当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染
2. 缓存传入的第一个函数
3. 类似于vue中计算属性

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo

1. 把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算
2. 缓存传入的函数的一个函数的返回值

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

hook 使用规则

1. 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用
2. 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用
3. 自定义的 Hook 中

React Router

官网

1. 版本V5.x
2. 包资源：

• react-router：核心包
• react-router-dom：用于DOM处理的包资源
• react-router-native：用于原生应用路由切换
• react-router-config：路由配置相关的包（renderRoutes()、matchRoutes()）

3. SPA单页面应用程序
4. 前端路由模式

• hash：利用URL中 hash 值变化不会重新请求服务器html资源的特点，在 JS 中监测 hash 值的变化并动态切换对应组件的渲染
• history：利用 H5 中新增的 history API 方法（pushState() / replaceState()），当修改 history 记录时也不会向服务器发送新的网络请求。

5. 安装

• $ npm i react-router-dom@5.2.0
• $ yarn add react-router-dom@5.2.0

6. API

• HashRouter hash 路由模式
• BrowserRouter history 路由模式
• Link 链接
• Route 路由配置，对路径进行匹配

<Route path="" component={} />
<Route path="" render={() => {return <></>}} />
<Route path="">
  <></>
</Route>

• Switch类似于JS中switch，匹配到第一个路由后就停止匹配
• 实例：

import React, {Component} from 'react';
import {Link,Route,Redirect,Switch} from "react-router-dom";
import Home from "./components/home"
import About from "./components/about"
import NavBar from "./components/nav-bar";
import Users from "./components/users"

class App extends Component {
    render() {
        return (
            <>
                <div>
                    <Link to="/home">首页</Link> || // Link跳转路由
                    <Link to="/about">关于</Link> ||
                    <Link to="/users">用户</Link>
                </div>
                <Switch> // switch匹配到第一个路由后停止
                    <Route path="/home" component={Home}/> // route匹配路由，成功则渲染component中home视图
                    <Route path="/about">
                        <NavBar></NavBar> // 匹配成功渲染route里的子视图
                        <About></About>
                    </Route>
                    <Route path="/users" render={()=>{ // 匹配成功渲染render中回调函数
                        return(
                            <>
                                <Users/>
                                <div>用户尾部</div>
                            </>
                        )
                    }}/>
                </Switch>
                <Redirect to="/home" /> // 如果都没匹配到，重定向路由路径为/home
            </>

        );
    }
}

export default App;

路由传参

1. 对于Component渲染的在组件中通过props可以直接拿到

	 <Switch>
         <Route path="/login" component={Login}/>
         <Route path="/home" component={Home}/>
     </Switch>

在home中接受到信息

import React from 'react'

function react(props) {
  console.log(props)
  return (
    <div>react</div>
  )


![img](https://img-blog.csdnimg.cn/img_convert/761190bd37c364e838318fb6d2197dac.png)
![img](https://img-blog.csdnimg.cn/img_convert/14c6dd5539d5673f57c2d16c201c87db.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**