react|react2-高阶组件与路由 react.js|前端|javascript

高阶组件（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( you clicked {count} times ) } 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 ) } export default Example

hook 使用规则

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

React Router 官网

【react|react2-高阶组件与路由】版本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 react-router-dom@5.2.0
$ yarn add react-router-dom@5.2.0

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

{return <>}} /> <>

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里的子视图 { // 匹配成功渲染render中回调函数 return( <> 用户尾部 ) }}/> // 如果都没匹配到，重定向路由路径为/home ); } }export default App;