高阶组件（HOC）

Higher Order Component
是一种基于 React 的组合特性而形成的设计模式。---- 装饰器模式：允许向一个现有的对象添加新的功能，同时又不改变其结构
高阶组件本质上是一个函数，函数以组件作为参数，返回新组件
利用高阶组件，可以在现有组件功能基础上增加新的功能，也可以对现有组件进行功能增强

Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
Hook是在函数组件中使用的，不能在 class 组件中使用，可以在函数组件中使用到 class 类组件中的特性

State Hook

在函数组件中使用类似 class 组件的 state 特性：

const [stateName, setStateValue] = React.useState(initialValue)

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

import React,{
    
    useState} from "react";
function Example(){
    
    
    const [count,setCount]=useState(0)
    return(
        <div>
            <p>you clicked {
    
    count} times</p>
            <button onClick={
    
    ()=>setCount(count+1)}>click me </button>
        </div>
    )
}
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(
        <div>
            <p>you clicked {
    
    count} times</p>
            <button onClick={
    
    ()=>setCount(count+1)}>click me </button>
        </div>
    )
}
export default Example

hook 使用规则

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

React Router

官网

版本V5.x
包资源：

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

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

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

安装

$ npm i [email protected]
$ yarn add [email protected]

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;

react2-高阶组件与路由