react知识点总结---react-router和hooks （六）

react-router

前端路由的原理

• 前端路由是如何做到URL和内容进行映射呢？监听URL的改变
• URL发生 变化，同时引起页面的刷新有另个办法：
  • 通过URL的hash改变URL
  • 通过HTML5的history模式修改URL

URL的hash

• URL的hash
  • URL的hash也就是锚点（#），本质是改变window.location的href属性
  • 我们可以通过直接复制location.hash来改变href，但是页面不发生刷新

HTML5的history

• history接口是HTML5新增的，他有六种模式改变URL而不刷新页面
  • replaceState:替换原来的路劲
  • pushState:使用新的路径
  • popState:路劲的回退
  • go:向前或向后改变路径
  • forward:向前改变路径
  • back：向后改变路径

Router的基本使用

• react-router最主要的API是给我们提供的一些组件
  • BrowserRouter或者 HashRouter
    • Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件
    • BrowserRouter使用history模式
    • HashRouter使用hash模式
  • Link和NavLink
    • 通常路径的跳转时使用Link组件，最终会被渲染成a元素
    • NavLink是在Link基础之上增加了一些样式属性
    • to属性：Link中最重要的属性，用于设置跳转到的路径
  • Router
    • Route用于路径的匹配
    • path属性：用于设置匹配到的路径
    • component属性：设置匹配到路径后，渲染的组件
    • exact:精准匹配，只有精准匹配到完全一致的路径才会渲染对应的组件

NavLink的使用

• 需求：路径选中时，对应的a元素变为红色
• 这个时候，我们呢要是有NavLink组件来代替Link组件
  • activeStyle:活跃时（匹配时）的样式
  • activeClassName:活跃时添加class
  • exact：是否精准匹配
• 但是，我们会发现在选中about或 profile时，第一个也会变成红色
  • 原因是/路径也匹配到了/about或profile
  • 这个时候，我们可以在第一个NavLink中添加上exact属性
• 默认的activeClassName
  • 事实上在默认匹配成功时，NavLink就会添加上一个动态的active class
  • 所以我们呢也可以直接编写样式
• 当然，如果你担心这个class在其他地方被使用，出现样式的层叠，也可以自定义class

Switch的作用

• 我们来看下面的路由规则

  • 当我们匹配到某个路径时，我们会发现一些问题
  • 比如/about路径匹配到的同时，/:userid 也被匹配到了，并且最后的一个NoMatch组件总是被匹配到

• 原因是什么呢？？默认情况下，react-router中只要是路径被匹配到的Route对应的组件都会被渲染

  • 但是实际开发中，我们往往希望有一种排他的思想
  • 只要匹配到了第一个，那么后面的就不应该继续匹配了
  • 这个时候我们可以使用Switch来讲所有的Route进行包裹即可

Redirect

• Redirect用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中
• 我们这里使用这个的一个案例
  • 用户跳转到User界面
  • 但是在User界面有一个isLogin用于记录用户是否登录
    • true:那么显示用户的名称
    • false：直接重定向到登陆页面

路由的嵌套

• 在开发中，路由之间是存在嵌套关系的。

• 这里我们假设about页面中有两个页面内容

  • 商品列表和消息列表
  • 点击不同的链接可以跳转到不同的地方，显示不同的内容；

手动路由跳转

• 目前我们实现的跳转主要是通过Link或者 NavLink进行跳转的，实际上我们也可以通过javascript代码进行跳转
• 但是通过javascript代码进行跳转有一个前提， 必须获取到history对象
• 如何可以获取到history的对象呢？两种当时
  • 方式一：如果该组件是通过路由直接跳转过来的，那么可以直接获取history location match对象
  • 方式二：如果该组件是一个普通渲染的组件，那么不可以直接获取history location match对象
• 那么如果普通的组件也希望获取对应的对象属性应该怎么做呢？
  • 前面我们学习过高阶组件，可以在组件中添加想要的属性；
  • react-router也是通过高阶组件为我们的组件添加相关的属性的；
• 如果我们希望在App组件中获取到history对象，必须满足以下两个条件：
  • App组件必须包裹在Router组件之内
  • App组件使用withRouter高阶组件包裹

参数传递

• 传递参数有三种方式：

  • 动态路由的方式
  • search传递参数
  • Link中to传入对象

• 动态路由的概念指的是路由中的路径并不会固定

  • 比如/detail的path对应一个组件Detail；

  • 如果我们将path在Route匹配时写成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到该Route，并且进行显示

  • 这个匹配规则，我们就称之为动态路由；

  • 通常情况下，使用动态路由可以为路由传递参数

  • <NavLink to="/detail/333" activeStyle={{ backgroundColor: 'yellow' }}>详情</NavLink>
    

  • search传递参数

    • <NavLink to="/detail?name=why&age=18" activeStyle={{ backgroundColor: 'yellow' }}>详情</NavLink>
      

  • Link中to可以直接传入一个对象

react-router-config

• 目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的
• 但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理：
  • 这个时候可以使用react-router-config来完成
• 安装react-router-config
  • yarn add react-router-config
• 配置路由映射的关系数组

• 使用renderRoutes函数完成配置

React Hooks

前沿：

为什么使用Hook

• Hook是react 16.8的新增特性，他可以让我们在不便携class的情况下使用state以及其他的React特性（比如生命周期）
• 我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的优势
• class组件可以定义自己的state，用来保存组件自己的内部的状态
  • 函数式组件不可以，因为函数每次调用都会产生新的临时变量
• class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑
  • 比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次
  • 函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求
• class组件可以在状态改变时，只会重新执行render函数以及我们希望重新调用生命周期函数componentDidUpdate等
  • 函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让他们调用一次
• 所以，在Hook出现之前，对于上面情况我们通常都会编写class组件

class组件存在的问题

• 复杂的组件变得难以理解
  • 我们在最初编写一个class组件时，往往逻辑比较简单，并不会非常复杂，但是随着业务的增多，我们class组件会变得越来越复杂
  • 比如componentDidMount中，可能就会包含大量的逻辑代码：包括网络请求，一些事件监听（还需要在componentWillUnmount中移除）
  • 而对于这样的class实际上非常难以拆分：因为他们呢的逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度
• 难以理解的class
  • 很多人发现学习ES6的class 是学习react的一个障碍
  • 比如在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的时间精力去学习this
  • 虽然前端人员也是需要掌握this,但是处理起来依旧很麻烦
• 组件复用状态很难
  • 在前面为了一些状态的复用我们需要通过高阶组件或者render props
  • 像我们呢之前学习的redux中connect 或者 react-router中的withRouter,这些高阶组件设计的目的就是为了状态的复用
  • 或者类似于Provider，Consumer 来共享一些状态，但是多次使用Consumer时，我们的代码就会存在很多的潜逃
  • 这些代码让我们不管是编写还是设计来说，都变得很麻烦，很困难

useState解析

• 那么我们来研究下核心的一段代码代表什么意思
  • useState来自react，需要从react中导入，他是一个hook
    • 参数：初始化值，如果不设置则为undefined
    • 返回值：数组，包含两个元素
      • 元素一：当前状态的值（第一调用未初始化值）
      • 元素二：设置状态值的函数
  • 点击button按钮后，会完成两件事情
    • 调用setCount，设置一个新的值
    • 组件重新渲染，并且根据新的返回值返回DOM结构
• 相信通过上面的案例，已经对Hook有一定的了解
  • hook就是javascript 函数，这个函数可以帮助你 钩入react state以及生命周期等特性
• 但是使用他们会有两个额外的规则
  • 只能在函数最外层调用Hook，不要再循环，条件判断或者子函数中使用
  • 只能在React的函数组件中调用Hook，不要再其他javascript函数中调用

认识useState

• State Hook的API就是 useState ， 我们在前面已经进行了学习
  • useState会帮助我们定义一个state变量，useState是一个新方法，他与class里面的this.state提供的功能完全相同，一般来说，在函数退出后变量就会消失，而state中的变量会被React保留
  • useState接受唯一一个参数，在第一次组件被调用时，使用来作为初始化值，（如果没有传递，那么初始化值就是undefined）
  • useState是一个数组，我们可以通过数组的解构来完成赋值会非常方便
• 为什么叫useState 而不是叫 createState
  • Create 可能不是很准确，因为state只在组件首次渲染的时候被创建
  • 在下一次重新渲染时，useState返回给我们呢当前的state
  • 如果每次都创建新的变量，他就不是state了
  • 这也是Hook的名字总是以use开头的一个原因

认识Effect Hook

• 目前我们已经通过hook在函数式组件中定义state，那么类似生命周期这些呢
  • Effect Hook 可以让你来完成一些类似于class中生命周期的功能
  • 事实上，类似于网络请求，手动更新DOM，一些事件的监听，都是React更新DOM的一些副作用
  • 所以对于网络请求，手动更新DOM的Hook被称之为Effect Hook
• 假如我们现在有一个需求：页面的title总是显示counter的数字，分别使用class组件和Hook实现：
  • 代码同上
• UseEffect的解析
  • 通过useEffect 的 Hook，可以告诉React需要在渲染后执行某些操作
  • useEffect要求我们传入一个回调函数，在React执行完更新DOM操作之后，就会回调这个函数
  • 默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数

需要清除Effect

• 在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除

  • 比如我们之前的事件总线或 Redux中手动调用subscribe
  • 都需要在componentWillUnmount有对应的取消订阅
  • Effect Hook 通过什么方式来模拟componentWillUnmount呢

• useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另一个回掉函数B

  • type EffectCallback = () => (void | (() => void | undefined));
    

• 为什么要在effect中返回一个函数

  • 这是effect可选的清除机制，每个effect都可以返回一个清除函数
  • 如此可以将添加和移除订阅的逻辑放在一起
  • 他们都属于effect的一部分

• React合适清除effect

  • React会在组件的更新和卸载的时候执行清除操作
  • 正如之前学到的，effect在每次渲染的时候都会执行

使用多个Effect

• 使用Hook的其中一个目的就是解决class中生命周期函数，将很多的逻辑放在一起的问题
  • 比如网络请求，事件监听，手动修改DOM, 这些往往都会放在componentDidMount中
• 使用Effect Hook ，我们可以将他们呢分离到不同的useEffect中
  • 代码不再给出
• Hook允许我们按照代码的用途分离他们，而不是像生命周期函数那样
  • React将按照effrct声明的顺序依次调用组件中的每一个effect

Effect性能优化

• 某些情况下，useEffect的回掉函数会在每次渲染都重新执行，但是这会导致两个问题
  • 某些代码我们只希望执行一次即可。类似于componentDidMount和componentWillUnmount中完成的事情（比如网络请求，订阅和取消订阅）
  • 另外，多次执行也会导致一定的性能问题
• 我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢
  • useEffect实际上有两个参数
  • 参数1：执行的回掉函数
  • 参数2：该useEffect在哪些state发生变化时，才重新执行（受谁影响）
• 案例练习
  • 受count影响的Effect
• 但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组
  • 那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了

useContext的使用

• 在之前的开发中，我们要在组件中使用共享的Context有两种方式
  • 类组件可以通过 类名.contextType = MyContext 方式，在类中获取context
  • 多个Context或者在函数式组件中通过MyContext.Consumer方式共享context
• 但是多个Context共享时的方式会存在大量的嵌套
  • Context Hook允许我们通过Hook来直接获取某个Context的值

export default function ConetextHookDemo () {
  const user = useContext(userContext)
  const them = useContext(themContext)
  console.log(user, them);
  return (
    <div>
      <h2>react hooks</h2>
    </div>
  )
}

• 注意事项
  • 当组件上层最近的 <MyContext.Provider>更新时 ，该Hook会触发重新渲染，并且使用最新传递给MyContext provider的context value值

useReducer

• 很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是
• useReducer仅仅是useState的一种替代方案
  • 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分
  • 或者这次修改的state需要依赖之前的state时，也可以使用

function reducer (state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, counter: state.counter + 1 }
    case "DECREMENT":
      return { ...state, counter: state.counter - 1 }
    default:
      return state
  }
}

export default function Home () {
  // const [counter, setCounter] = useState(0)
  const [state, dispatch] = useReducer(reducer, { counter: 0 })

  return (
    <div>
      <h2>{state.counter}</h2>
      <button onClick={e => dispatch({ type: "DECREMENT" })}>-1</button>
      <button onClick={e => dispatch({ type: "INCREMENT" })}>+1</button>
    </div>
  )
}

• 数据是不会共享的，他们只是使用了相同的reducer而已
• 所以，useReducer只是useState的一种替代品，并不能替代Redux

useCallback

• useCallback实际的目的是为了进行性能的优化
• 如何进行性能优化呢？
  • useCallback会返回一个函数的memoized（记忆的）值
  • 在依赖不变的情况下，多次定义的时，返回的值是相同的

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

• 案例
  • 案例一：使用useCallback和不使用useCallback定义一个函数是否会带来性能优化
  • 案例二：使用useCallback和不使用useCallback定义一个函数传递给子组件是否会带来性能的优化
• 通常使用useCallback的目的是不希望进行多次渲染，并不是为了函数进行缓存
• 场景：在讲一个组件的函数，传递给子元素进行回调使用时，使用useCallback对函数进行处理

useMemo

• useMemo实际的目的也是为了进行性能的优化
• 如何进行性能的优化呢？
  • useMemo返回的也是一个memoized(记忆的)值
  • 在依赖不便的情况下，多次定义的时候，返回的值是相同的

function calcNumber (count) {
  let total = 0
  console.log("calcNumber执行");
  for (let i = 1; i < count; i++) {
    total += i
  }
  return total
}
export default function MemoHookDemo () {
  const [count, setCount] = useState(10)
  const [show, setShow] = useState(true)

  const total = useMemo(() => {
    return calcNumber(count)
  }, [count])

  return (
    <div>
      <h2>计算数字的和：{total}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <button onClick={e => setShow(!show)}>show切换</button>
    </div>
  )
}

• 案例
  • 案例一：进行大量的计算操作，是否有必须要每次渲染时都重新计算
  • 案例二：对自组建传递相同内容的对象时，使用useMemo进行性能的优化

useImperativeHandle

• useImperativeHandle并不是特别好理解，需要一步步学习
• 我们先来回顾一下ref和forwardRef结合使用
  • 通过forwardRef可以将ref转发到子组件
  • 子组件拿到父组件中创建的ref，绑定到自己的某一个元素中
• forwardRef的做法本身没有什么问题，但是我们是将自组建的DOM直接暴露给了父组件
  • 直接暴露给负组件带来的问题是某些情况的不可控
  • 父组件可以拿到DOM后进行任意的操作
  • 但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望他随意操作
• 通过useImperativeHandle可以只暴露固定的操作
  • 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起
  • 所以在父组件中，使用inputRef.current时，实际上是由的是返回的对象
  • 比如我调用了focus函数，甚至可以调用printHello函数

useLayoutEffect

• useLayoutEffect看起来和useEffect非常相似，事实上他们也只有一点区别而已

  • useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新，
  • useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新

• 如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect中

• 注：一个是更新DOM后执行，一个是更新DOM前执行

自定义Hook

• 自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，他本身并不是react的特性
• 需求：所有的组件在创建和销毁的时候都进行打印
  • 组件被创建：打印组件被创建了
  • 组件被销毁：打印组件被销毁了

export default function CustomHookDemo01 () {
  useEffect(() => {
    console.log("组件被创建了");
    return () => {
      console.log("组件被销毁了");
    }
  }, [])

  return (
    <div>
      CustomHookDemo01
    </div>
  )
}

// 自定义hook
function Home(props){
    useLoggingLife()
    return <h2>Home</h2>
}

function Profile(props){
    useLoggingFife()
    return <h2>Profile</h2>
}

function useLoggingLife(name){
    useEffect(() => {
        console.log(`${name}组件被创建了`)
        return () => {
            console.log(`${name}组件被销毁了`)
        }
    }, [])
}

自定义Hook - context共享

import { useContext } from 'react';

import { UserContext, ThemContext } from '../App';

export default function () {
  const user = useContext(UserContext)
  const them = useContext(ThemContext)

  return [user, them]
}
//================================================

import React from 'react'

import userContextHook from "../hooks/user-hook"

export default function CustomContextHook () {
  const [user, them] = userContextHook()
  console.log(user, them);
  return (
    <div>
      hook context共享
    </div>
  )
}

自定义Hook - localstorage 数据存储

import { useState, useEffect } from 'react'

export default function (key) {
  const [name, setname] = useState(() => {
    return JSON.parse(window.localStorage.getItem(key))
  })

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(name))
  }, [name])

  return [name, setname]
}


// ===================================================

import React from 'react'
import useNameState from '../hooks/localstorage'

export default function LocalStorage () {
  const [name, setname] = useNameState('name')

  return (
    <div>
      <h2>拿到的姓名是：{name}</h2>
      <button onClick={e => setname('Tom')}>获取名字</button>
    </div>
  )
}

redux hooks

• 在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux中的connect
  • 但是这种方式必须使用高阶函数结合返回的高阶组件
  • 并且必须编写：mapStateToPorps和mapDispatchToProps映射函数
• 在redux7.1开始，提供了Hook的方式，我们再也不需要编写connect以及对应的映射函数了
• useSelector的作用是将state映射到组件中
  • 参数一：将state映射到需要的数据中
  • 参数二：可以进行比较来决定是否组件重新渲染
• useSelector默认会比较我们呢返回的两个对象是否相等
  • 如何比较呢？const refEquality = (a,b) => a===b
  • 也就是我们必须返回两个完全相等的对象才可以不引起重新渲染
• useDispatch非常简单，就是直接获取dispatch函数，之后再组件中直接使用即可
• 我们还可以通过useStore来获取当前的store对象