react2-高阶组件与路由_react 高阶组件 路由

useState() 传递状态初始值作为参数，返回一个数组。数组第一个元素为状态数据，第二个元素是修改状态的方法

import React,{useState} from “react”;
function Example(){
const [count,setCount]=useState(0)
return(

you clicked {count} times

<button onClick={()=>setCount(count+1)}>click me

)
}
export default Example

#### Effect Hook


Effect Hook 可以让你在函数组件中执行副作用操作


如果你熟悉 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(

you clicked {count} times

<button onClick={()=>setCount(count+1)}>click me

)
}
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


[官网](https://bbs.csdn.net/topics/618545628)


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 路由配置，对路径进行匹配

* 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 (
<>

首页 || // Link跳转路由
关于 ||
用户

// switch匹配到第一个路由后停止
// route匹配路由，成功则渲染component中home视图

// 匹配成功渲染route里的子视图


<Route path=“/users” render={()=>{ // 匹配成功渲染render中回调函数
return(
<>

用户尾部

</>
)
}}/>

// 如果都没匹配到，重定向路由路径为/home
</>

    );
}

}

export default App;

![img](https://img-blog.csdnimg.cn/img_convert/be1e42996e3e7415e7f1a38413c7191f.png)
![img](https://img-blog.csdnimg.cn/img_convert/39cee72900f3f88d6c03f6bb850ad774.png)
![img](https://img-blog.csdnimg.cn/img_convert/f6b94e254388b89f211ced5f5f53dc42.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

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

uD7-1714162214093)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

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