React学习笔记(六)Hooks_凉宫凉-优快云博客

本文链接：https://blog.youkuaiyun.com/kianagrow/article/details/128307827

本文详细介绍了React Hooks的使用，包括useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useImperativeHandle、useLayoutEffect和自定义Hook等，阐述了它们在不同场景下的应用，帮助开发者更好地理解和掌握React函数组件中的状态管理和生命周期处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 认识Hook

1.1 为什么需要 Hook

Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state 以及其他的React特性（比如生命周期）。

我们先来思考一下 class 组件相对于函数式组件有什么优势？比较常见的是下面的优势：

class 组件可以定义自己的 state，用来保存组件自己内部的状态；
- 函数式组件不可以，因为函数每次调用都会产生新的临时变量；
class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；
- 比如在 componentDidMount 中发送网络请求，并且该生命周期函数只会执行一次；
- 函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；
class 组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等；
- 函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；

所以，在Hook出现之前，对于上面这些情况我们通常都会编写class组件。

【下面是一个函数式组件和类组件】

// 类组件
class HelloWorld extends PureComponent{
  constructor() {
    super();
    this.state = {
      message : 'hello world'
    }
  }
  render() {
    const { message } = this.state
    return (<div>
      <h2>{ message}</h2>
      <button onClick={e=> this.setState({message:'你好'})}>修改文本</button>
    </div>)
  }
}
// 函数式组件
function HelloReact() {
  let message = "hello react"
  // 函数式组件存在的缺陷
  // 1. 组件不会被重新渲染：修改message之后，组件不知道自己要重新进行渲染
  // 2. 退一步说如果组件重新渲染了：函数重新执行了，message 还是会被赋值为原来的 hello react
  // 3. 不能调用生命周期
  return (
    <div>
      <h2>{message}</h2>
      <button onClick={ e => message = "你好"}>修改文本</button>
    </div>
  );
}

1.2 Class组件存在的问题

复杂组件变得难以理解：

我们在最初编写一个class组件时，往往逻辑比较简单，并不会非常复杂。但是随着业务的增多，我们的class组件会变得越来越复杂；
比如componentDidMount中，可能就会包含大量的逻辑代码：包括网络请求、一些事件的监听（还需要在componentWillUnmount中移除）；
而对于这样的 class 实际上非常难以拆分：因为它们的逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度；

难以理解的 class：

很多人发现学习ES6的class是学习React的一个障碍。
比如在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的精力去学习this；

组件复用状态很难：

在前面为了一些状态的复用我们需要通过高阶组件；
像之前学习的 redux中connect或者react-router中的withRouter，这些高阶组件设计的目的就是为了状态的复用；
或者类似于Provider、Consumer来共享一些状态，但是多次使用Consumer时，我们的代码就会存在很多嵌套；
这些代码让我们不管是编写和设计上来说，都变得非常困难；

Class组件和Functional组件对比

在这里插入图片描述

1.3 Hook的出现

Hook的出现，可以解决上面提到的这些问题；

简单总结一下hooks：

它可以让我们在不编写class的情况下使用state以及其他的React特性；
但是我们可以由此延伸出非常多的用法，来解决我们前面所提到的问题；

Hook 的使用场景：

Hook 的出现基本可以代替之前所有使用 class 组件的地方；
但是如果是一个旧的项目，你并不需要直接将所有的代码重构为Hooks，因为它完全向下兼容，你可以渐进式的来使用它；
Hook 只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

在继续之前，请记住 Hook 是：

完全可选的：你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
100% 向后兼容的：Hook 不包含任何破坏性改动。
现在可用：Hook 已发布于 v16.8.0。

1.4 计数器案例对比

我们通过一个计数器案例，来对比一下 class 组件和函数式组件结合hooks的对比：

【class实现计数器】

import React, { PureComponent } from 'react'
class CounterClass extends PureComponent {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <h1>CountClass当前计数: {count}</h1>
        <button onClick={(e) => this.increment()}>+1</button>
        <button onClick={(e) => this.decrement()}>-1</button>
      </div>
    );
  }
}
export default CounterClass

【函数式结合hook】

import { memo,useState } from "react";
function CounterHook(props) {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h2>CounterHook当前计数:{ count }</h2>
      <button onClick={e=> setCount(count + 1)}>+1</button>
      <button onClick={e=> setCount(count - 1)}>-1</button>
    </div>
  )
}
export default memo(CounterHook)

会发现上面的代码差异非常大：函数式组件结合hooks让整个代码变得非常简洁，并且再也不用考虑this相关的问题；

1.5 useState 解析

我们来研究一下上面函数式组件配合hook的核心的一段代码代表什么意思：

useState 来自 react，需要从 react 中导入，它是一个 hook ；

参数：初始化值，如果不设置为 undefined；
返回值：数组，包含两个元素；
- 元素一：当前状态的值；
- 元素二：修改状态值的函数；

点击 button 按钮后，会完成两件事情：

调用 setCount，设置一个新的值；
组件重新渲染，并且根据新的值返回 DOM 结构；

Hook 就是 JavaScript 函数，这个函数可以帮助你 钩入（hook into） React State以及生命周期等特性；

但是使用它们会有两个额外的规则：

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

import React, { memo, useState } from 'react'
const App = memo(() => {
  const [message, setMessage] = useState("hello world");
  function changeMessage() {
    setMessage('你好')
  }
  return (
    <div>
      <h2>App:{message}</h2>
      <button onClick={changeMessage}>修改文本</button>
    </div>
  );
})
export default App

Hook指的类似于useState、 useEffect这样的函数；Hooks是对这类函数的统称；

2. 认识 usesState

State Hook 的 API 就是 useState，在前面已经接触过了：

useState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。
一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。
useState 接受唯一一个参数，在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。
useState的返回值是一个数组，我们可以通过数组的解构，来完成赋值会非常方便。

FAQ：为什么叫 useState 而不叫 createState?

“create” 可能不是很准确，因为 state 只在组件首次渲染的时候被创建。
在下一次重新渲染时，useState 返回给我们当前的 state。
如果每次都创建新的变量，它就不是 “state”了。
这也是 Hook 的名字总是以 use 开头的一个原因。

当然，我们也可以在一个组件中定义多个变量和复杂变量（数组、对象）

3. Effect Hook

3.1 认识Effect Hook

目前我们已经通过 hook 在函数式组件中定义 state，那么类似于生命周期这些呢？

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
所以对于完成这些功能的Hook被称之为 Effect Hook；

【示例：使用Effect Hook，实现网页标题随着数字的改变而改变】

import React, { memo, useState, useEffect } from "react";
const App = memo(() => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    // 当前传入的回调函数会在组件被渲染完成后，自动执行
    // 网络请求/DOM操作(修改标题)/事件监听
  document.title = count; 
  })
  return (
    <div>
      <h2>App: { count }</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
    </div>
  )
})
export default App

useEffect的解析：

通过 useEffect 的 Hook，可以告诉 React 需要在渲染后执行某些操作；
useEffect 要求我们传入一个回调函数，在React执行完更新DOM操作之后，就会回调这个函数；
默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数；

3.2 需要清除Effect

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

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

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

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

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

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

React 何时清除 effect？

React 会在组件更新和卸载的时候执行清除操作；

import React, { memo, useState, useEffect } from "react";
const App = memo(() => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    // 监听事件/订阅事件/(这里假设对 store监听 )
    // const unsubstrib = store.subscribe(() => {
    //   // todo...
    // })
    console.log('监听了redux中的数据变化')
    return () => {
      // unsubstrib();
      console.log('取消监听 redux 中的 数据变化')
    }
  })
  return (
    <div>
      <h2>App: { count }</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
    </div>
  )
})
export default App

3.3 使用多个 Effect

使用 Hook 的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题：

比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中；
而使用 Effect Hook，我们可以将它们分离到不同的 useEffect中：

Hook 允许我们按照代码的用途分离它们，而不是像生命周期函数那样：

React 将按照 effect 声明的顺序依次调用组件中的每一个 effect；

import React, { memo, useEffect } from "react";
const App = memo(() => {
  // 一个函数式组件中，可以存在多个 useEffect
  useEffect(() => {
    console.log('监听 A')
    return () => {
      console.log('取消监听A')
    };
  });
  useEffect(() => {
    console.log('监听B')
    return () => {
      console.log('取消监听B')
    };
  });
  return (<h2>App:</h2>);
});
export default App;

3.4 Effect 性能优化

默认情况下，useEffect 的回调函数会在每次渲染时都重新执行，但是这会导致两个问题：

某些代码我们只是希望执行一次即可，类似于componentDidMount 和 componentWillUnmount 中完成的事情；（比如网络请求、订阅和取消订阅）；
另外，多次执行也会导致一定的性能问题；

我们如何决定 useEffect 在什么时候应该执行和什么时候不应该执行呢？

useEffect实际上有两个参数：
参数一：执行的回调函数；
参数二：该 useEffect 在哪些 state 发生变化时，才重新执行；（受谁的影响）

如果一个 useEffect 函数不依赖任何的内容时，也可以传入一个空的数组 []：

那么这里的两个回调函数分别对应的就是 componentDidMount 和 componentWillUnmount 生命周期函数了；

import React, { memo, useEffect, useState } from "react";
const App = memo(() => {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("hello");
  // 传入空数组作为第二个参数，则表示不受任何状态依赖；
  // 只会在组件挂载以及卸载的时候执行；组件更新时不再执行
  useEffect(() => {
    console.log("发送网络请求,在组件被挂载时才会执行一次");
    return () => {
      console.log('在组件被卸载时才会执行一次')
    }
  }, []);
  // 如果第二个参数中，指定了依赖的数据；如下只有 count 改变时才会执行
  useEffect(() => {
    console.log("修改了count");
  }, [count]);
  // 只有 message 改变时才执行
  useEffect(() => {
    console.log("修改了message");
  }, [message]);
  // 像下面这个每次更新都会执行；
  useEffect(() => {
    console.log("监听A");
  });
  return (
    <div>
      <h2>
        App: count:{count} message:{message}
      </h2>
      <button onClick={e=>setCount(count + 1)}>修改数字</button>
      <button onClick={e => setMessage('你好')}>修改文本</button>
    </div>
  );
});
export default App;

4. useContext

在之前的开发中，我们要在组件中使用共享的 Context 有两种方式：

类组件可以通过 类名.contextType = MyContext 方式，在类中获取 context；
多个 Context 或者在函数式组件中通过 MyContext.Consumer 方式共享 context；

但是多个Context共享时的方式会存在大量的嵌套：

Context Hook 允许我们通过Hook来直接获取某个 Context 的值；

【示例：对比以前的context用法和hook的用法】

import React, { memo,useContext } from "react";
import {
  UserContext,
  ThemeContext,
} from "../05_useContext的使用/context/index";
const App = memo(() => {
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);
  return (
    // ===多层嵌套，以前写起来很复杂===
    // <UserContext.Consumer>
    //   {uerValue => {
    //     return (<div>
    //       <ThemeContext.Consumer>
    //         {themeValue => {
    //           return <h2>theme:{themeValue.color} user:{uerValue.name}</h2>;
    //         }}
    //       </ThemeContext.Consumer>
    //     </div>)
    //   }}
    // </UserContext.Consumer>
    //=== 使用 hook 则会非常方便
    <div>
      <h2>
        user:{user.name};theme:{theme.color}
      </h2>
    </div>
  );
});
export default App;

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

5. useReducer(了解)

很多人看到 useReducer 的第一反应应该是 redux 的某个替代品，其实并不是。

useReducer 仅仅是 useState 的一种替代方案：

在某些场景下，如果 state 的处理逻辑比较复杂，我们可以通过 useReducer 来对其进行拆分；
或者这次修改的state需要依赖之前的state时，也可以使用；

【示例：了解即可，很少使用】

import React, { memo, useReducer } from 'react'
function reducer(state,action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 }
    case 'decrement':
      return { ...state, count: state.count - 1 }
    case 'add_num':
      return {...state,count:state.count + action.num}
    default:
      return state;
  }
}
const App = memo(() => {
  // 该 hook一般是使用在 状态很多，处理也很多的情况下；这里仅一个 count 做示例而已
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <h2>App计数为:{state.count}</h2>
      <button onClick={(e) => dispatch({ type: "increment" })}>+1</button>
      <button onClick={(e) => dispatch({ type: "decrement" })}>-1</button>
      <button onClick={(e) => dispatch({ type: "add_num" ,num:8})}>+8</button>
    </div>
  );
})
export default App

6. useCallback

useCallback 实际的目的是为了进行性能的优化。

useCallback 会返回一个函数的 memoized（记忆的）回调函数。；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；
通常使用 useCallback 的目的是不希望子组件进行多次渲染，并不是为了函数进行缓存；

总结：使用 useCallback 和不使用 useCallback 定义一个函数不带来性能的优化，只有使用 useCallback定义一个函数，并传递给子组件使用才会带来性能优化

【示例】

import React, { memo,useCallback, useState } from 'react'
// useCallback 性能优化的点：
// 1. 当需要将一个函数传递给子组件时，最好使用useCallback进行优化，将优化之后的函数，传递给子组件；
// 可以避免子组件的非必要渲染
const MyComponent = memo((props) => {
  const { increment } = props
  console.log("MyComponent被渲染了");
  return (
    <div>
      <h4>MyComponent</h4>
      <button onClick={increment}>increment</button>
    </div>
  );
})
const App = memo(() => {
  const [count, setCount] = useState(0)
  const [message,setMessage] = useState('hello')
  const increment = useCallback(() => {
    setCount(count + 1)
  }, [count])
  // function increment() {
  //   setCount(count + 1)
  // }
  return (
    <div>
      <h2>App:count:{count}:message:{ message}</h2>
      {/* <button onClick={ increment}>修改数字</button> */}
      <MyComponent increment={increment} />
      <button onClick={e=>setMessage(Math.random())}>修改message</button>
    </div>
  );
})
export default App

上面的实例中，如果使用注释掉的 increment 函数，则修改 message 时，导致子组件会重新渲染，因为子组件的 props变了；而使用 useCallback，它会记录下 increment 依赖的数据没变，则使用原先的 increment，所以子组件的 props.increment 没变，也就不会渲染

【上述代码的额外优化】

import { useRef } from 'react'
// ,,,省略部分代码
const App = memo(() => {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState('hello')
  // 进一步优化，当 count 发生改变时，也使用同一个函数
  // useRef 在 组件多次渲染时，返回的都是同一个值
  const countRef = useRef();
  countRef.current = count;
  const increment = useCallback(()=> {
    setCount(countRef.current + 1)
  },[])
  // return ...省略其他代码
})

7. useMemo

useMemo 实际的目的也是为了进行性能的优化。

useMemo 返回的也是一个 memoized（记忆的）值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；

案例一：有大量的计算操作时，没必须要每次渲染时都重新计算；

import React, { memo, useMemo, useState } from "react";
function sum(number) {
  console.log("计算过程被调用");
  let total = 0;
  for (let i = 1; i <= number; i++) {
    total += i;
  }
  return total;
}
const App = memo(() => {
  const [count, setCount] = useState(0);
  //传入空数组作为第二个参数，表示什么都不依赖
  // 这个res在组件更新时，会复用原来的值，而不是重新调用函数去计算；
  const res = useMemo(() => {
    return sum(50);
  }, []);
  // 这个 res2 由于指定了 依赖 count，只有当 count改变时，才会重新计算
  const res2 = useMemo(() => {
    return sum(count * 2)
  },[count])
  return (
    <div>
      <h2>计算过程:{res}</h2>
      {/* <h2>{sum(50)}</h2> 这样的调用方式在组件更新时总是会重新调用计算 */}
      <h2>res2:{res2}</h2>
      <button onClick={(e) => setCount(count + 1)}>count加1</button>
    </div>
  );
});
export default App;

案例二：对子组件传递相同内容的对象时，使用useMemo进行性能的优化

const App = memo(() => {
  const [count, setCount] = useState(0);
  // 对子组件进行渲染进行优化；
  // 如果使用普通对象定义 info；在App更新时，info都会被重新赋值，导致子组件的props改变
  const info = useMemo(() => {
    return { name:foo,age:29}
  },[])
  return (
    <div>
      <h2>计算过程:{count}</h2>
      <button onClick={(e) => setCount(count + 1)}>count加1</button>
      <HelloWorld info={ info}>
    </div>
  );
});

8. useRef

useRef 返回一个 ref 对象，返回的ref对象在组件的整个生命周期保持不变。

最常用的ref是两种用法：

用法一：引入DOM元素（或者组件，但是需要是class组件，calss组件才有组件实例）；

import React, { memo,useRef } from 'react'
const App = memo(() => {
  const titleRef = useRef()
  function showDom(){
    console.log(titleRef.current)
  }
  return (
    <div>
      <h2 ref={titleRef}>App</h2>
      <button onClick={showDom}>打印DOM</button>
    </div>
  );
})
export default App

用法二：保存一个数据，这个对象在整个生命周期中可以保存不变；其 .current 属性中保存一个可变的值

const refContainer = useRef(initialValue);

9. useImperativeHandle(了解)

这里先来回顾一下 ref 和 forwardRef 结合使用：

通过forwardRef可以将ref转发到子组件；
子组件拿到父组件中创建的 ref，绑定到自己的某一个元素中；

forwardRef 的做法本身没有什么问题，但是我们是将子组件的DOM直接暴露给了父组件：

直接暴露给父组件带来的问题是某些情况的不可控；
父组件可以拿到DOM后进行任意的操作；
但是，若我们只是希望父组件可以操作的某些限定操作，其他并不希望它随意操作；

通过 useImperativeHandle 可以只暴露固定的操作：

通过 useImperativeHandle 的 Hook，将传入的 ref 和useImperativeHandle第二个参数返回的对象绑定到了一起；
所以在父组件中，使用 inputRef.current时，实际上使用的是返回的对象；

import React, { forwardRef, memo,useRef,useImperativeHandle } from 'react'
const MyInput = memo(forwardRef((props, ref) => {
  //自己内部定义ref
  const inputRef = useRef()
  // 子组件对父组件传入的ref进行处理；
  // 在父组件那只能使用暴露出去的方法，来操作dom
  useImperativeHandle(ref, () => {
    return {
      getFocus() {
        inputRef.current.focus()
      },
      setVal(val) {
        inputRef.current.value = val;
      }
    }
  })
  return <input type="text" ref={inputRef}></input>
}))
const App = memo(() => {
  const inputRef = useRef();
  function showDom() {
    // 只能使用暴露的功能，无法直接操纵子组件的DOM
    inputRef.current.getFocus();
    inputRef.current.setVal('hhh')
  }
  return (
    <div>
      <h2>App</h2>
      <MyInput ref={inputRef}/>
      <button onClick={showDom}>打印DOM</button>
    </div>
  );
})
export default App

10. useLayoutEffect

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

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

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

useEffect 和 useLayoutEffect的对比

在这里插入图片描述

import React, { memo,useEffect,useLayoutEffect,useState } from 'react'
const App = memo(() => {
  const [count,setCount] = useState(0)
  useLayoutEffect(() => {
    console.log("useLayoutEffect--2");
  })
  useEffect(() => {
    console.log("useEffect--3");
  })
  console.log('render--1')
  return (
    <div>
      <h2>App:{ count }</h2>
      <button onClick={e=> setCount(count + 1)}>+1</button>
    </div>
  );
})
export default App

11. 自定义hook

自定义 Hook 本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算 React 的特性。

需求：利用自定义hook 使组件在创建和销毁时都进行打印

import React, { memo, useEffect, Fragment, useState } from "react";
// 自定义 hook；检测组件的创建和销毁
function useLogLife(name) {
  useEffect(() => {
    console.log(`${name}组件被挂载`);
    return () => {
      console.log(`${name}组件被销毁`);
    };
  }, []);
}
const Home = memo(() => {
  // 使用 hook
  useLogLife('home');
  return <h2>Home</h2>;
});
const About = memo(() => {
  useLogLife('about');
  return <h2>About</h2>;
});
const App = memo(() => {
  const [isShow,setShow] = useState(true)
  return (
    <div>
      <h1>App</h1>
      <button onClick={(e) => setShow(!isShow)}>切换</button>
      {isShow && (
        <Fragment>
          <Home />
          <About />
        </Fragment>
      )}
    </div>
  );
});
export default App;

11.1 练习1(共享context)

假如有一些组件都需要共享这几个 Context；如 useContext 和 tokenContext ，就可以把这两个 context 封装到一个 hook 中；

import { useContext } from ' react'
import { UserContext,tokenContext } from '../context'
function useUserToken() {
  const user = useContext(UserContext);
  const token = useContext(tokenContext);
  return [user,token]
}
export default useUserToken

这里只展示如何封装到 hook中，context 的定义，在组件中使用的代码就略了

11.2 练习2(监控文档滚动)

获取文档滚动位置

定义 useScrollPosition hook

import { useEffect, useState } from "react";
function useScrollPosition() {
  const [scrollX, setScrollX] = useState(0);
  const [scrollY, setScrollY] = useState(0);
  useEffect(() => {
    function handleScroll() {
      console.log(window.scrollX, window.screenY);
      setScrollX(window.scrollX);
      setScrollY(window.scrollY);
    }
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  return [scrollX, scrollY];
}
export default useScrollPosition;

在 App.jsx 中去使用上面定义的 hook，用于监听页面的滚动；当然，这在多个页面中都用到该功能，才能体现 hook 的复用性

import React, { memo } from "react";
import useScrollPosition from "./useScrollPosition"
const App = memo(() => {
  const [scrollX, scrollY] = useScrollPosition();
  return (
    <div style={{ height: "3999px", width:'3000px' }}>
      <h1>
        scrolX:{scrollX}
        scrollY{scrollY}
      </h1>
    </div>
  );
});
export default App;

11.3 练习3(本地存储处理)

定义 useLocalStorage hook；用于管理本地化存储

import { useEffect, useState } from "react";
// 根据传入的 key 作为 存储的键名
function useLocalStorage(key) {
  // 1. 利用 key 从 localStorage 中获取数据，并根据该数据创建组件的 state
  // 如果 storage 中没有 存储过该 key,下面的 data 就是 null
  const [data, setData] = useState(JSON.parse(localStorage.getItem(key)));
  // 2. 监听数据的改变，一旦数据发生改变就存储 data 的最新值
  useEffect(() => {
    // 如果 data 为 null ，即 storage 里没有保存过
    if (!data) return;
    localStorage.setItem(key, JSON.stringify(data));
  }, [data]);
  // // 3. 将 data 和 setData 的操作返回给组件，让组件可以使用和修改
  return [data,setData]
}
export default useLocalStorage

在 App.jsx 中去尝试使用 useLocalStorage 功能

import React, { memo } from 'react'
import useLocalStorage from './useLocalStorage';
const App = memo(() => {
  // 如果本地 有 token ，则会显示本地的token，如果没有 ，该 token 为 null
  const [token, setToken] = useLocalStorage('token');
  const [avatarUrl, setAvatarUrl] = useLocalStorage('avatarUrl');
  function TokenHandle() {
    setToken("foooooooooo");
  }
  function AvatarUrlHandle() {
    setAvatarUrl("http://www.xxx.xxx.png");
  }
  return (
    <div>
      <h2>app</h2>
      <h2>token:{ token }</h2>
      <button onClick={TokenHandle}>设置token</button>
      <h2>avatarUrl:{avatarUrl}</h2>
      <button onClick={AvatarUrlHandle}>设置头像地址</button>
    </div>
  )
})
export default App

12. redux hooks

12.1 useSelector

在之前的 redux开发中，为了让组件和 redux 结合起来，我们使用了react-redux 中的connect：

但是这种方式必须使用高阶函数结合返回的高阶组件；
并且必须编写：mapStateToProps 和 mapDispatchToProps 映射的函数；

先回顾一下以前的写法(注：store，reducer，action等代码省略，这里只展示在组件中如何用以前的方法使用 redux)

import React, { memo } from 'react'
import { connect } from "react-redux"
import { addCountAction,subCountAction } from './store/modules/count'
const App = memo((props) => {
  const {count,addCount,subCount} = props
  return (
    <div>
      <h2>App:当前计数:{count}</h2>
      <button onClick={e=> addCount(10)}>+10</button>
      <button onClick={e=> subCount(10)}>-10</button>
    </div>
  );
})
const mapStateToProps = (state) => ({
  count: state.count.count,
});
const mapDispatchToProps = (dispatch) => ({
  addCount(num) {
    dispatch(addCountAction(num));
  },
  subCount(num) {
    dispatch(subCountAction(num))
  }
})
export default connect(mapStateToProps,mapDispatchToProps)(App);

在 Redux7.1 开始，提供了Hook的方式，我们再也不需要编写 connect 以及对应的映射函数了

useSelector 的作用是将 state 映射到组件中：

参数一：将state映射到需要的数据中；
参数二：可以进行比较来决定是否组件重新渲染;

useSelector 默认会比较我们返回的两个对象是否相等；

如何比较呢？ const refEquality = (a, b) => a === b；
也就是我们必须返回两个完全相等的对象才可以不引起重新渲染；

useDispatch 非常简单，直接获取 dispatch 函数，之后在组件中直接使用即可；

我们还可以通过 useStore 来获取当前的store对象；

【下面是对上面代码使用 redux hook 的改造】

import React, { memo } from "react";
import { useSelector, useDispatch } from "react-redux";
import {addCountAction,subCountAction} from "./store/modules/count"
const App = memo((props) => {
  // 1. 使用 useSelector 将 redux 中store的数据映射到组件内
  const { count } = useSelector((state) => ({
    count: state.count.count,
  }));
  // 2. 直接使用 dispatch 派发 action
  const dispatch = useDispatch();
  function changeCount(count,isAdd){
    if (isAdd) {
      dispatch(addCountAction(count));
    } else {
      dispatch(subCountAction(count))
    }
  }
  return (
    <div>
      <h2>App:当前计数:{count}</h2>
      <button onClick={e=> changeCount(10,true)}>+10</button>
      <button onClick={e=> changeCount(10,false)}>-10</button>
    </div>
  );
});
export default App;

【示例：下面将展示 useSelector 的第二个参数的使用】

描述：App组件的 count 改变了，但引起了 Home 组件的渲染；Home 组件的 message 改变了，也引起了 App的渲染；显然影响性能；建议在使用 useSelector 时，都传入第二个参数 shallowEqual；

import React, { memo } from "react";
import { useSelector, useDispatch,shallowEqual } from "react-redux";
import { addCountAction, subCountAction,changeTextAction } from "./store/modules/count"
const Home = memo(() => {
  const { message } = useSelector((state) => ({
    message:state.count.message
  }),shallowEqual)
  const dispatch = useDispatch();
  function changeMessage(text){
    dispatch(changeTextAction(text))
  }
  console.log('home被渲染了')
  return (
    <div>
      <h2>Home:message:{message}</h2>
      <button onClick={e=> changeMessage('hello react')}>修改文本</button>
    </div>
  );
})
const App = memo((props) => {
  const { count } = useSelector((state) => ({
    count: state.count.count,
  }),shallowEqual);
  const dispatch = useDispatch();
  function changeCount(count,isAdd){
    if (isAdd) {
      dispatch(addCountAction(count));
    } else {
      dispatch(subCountAction(count))
    }
  }
  console.log('app被渲染了')
  return (
    <div>
      <h2>App:当前计数:{count}</h2>
      <button onClick={e=> changeCount(10,true)}>+10</button>
      <button onClick={e => changeCount(10, false)}>-10</button>
      <Home />
    </div>
  );
});
export default App;

12.2 useId(了解)

官方的解释：useId 是一个用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。

这里有一个词叫 hydration，要想理解这个词，我们需要理解一些服务器端渲染（SSR）的概念。

12.2.1 SSR

SSR概念：

SSR（Server Side Rendering，服务端渲染），指的是页面在服务器端已经生成了完整的HTML 页面结构，通过执行JS代码，再创建页面结构；
对应的是CSR（Client Side Rendering，客户端渲染），

我们开发的SPA页面通常依赖的就是客户端渲染；

早期的服务端渲染包括PHP、JSP、ASP等方式，但是在目前前后端分离的开发模式下，前端开发人员不太可能再去学习 PHP、JSP 等技术来开发网页；
不过我们可以借助于 Node 来帮助我们执行JavaScript代码，提前完成页面的结构；

在这里插入图片描述

12.2.2 SSR同构应用

什么是同构？

一套代码既可以在服务端运行又可以在客户端运行，这就是同构应用。

同构是一种SSR的形态，是现代SSR的一种表现形式。

当用户发出请求时，先在服务器通过SSR渲染出首页的内容。
但是对应的代码同样可以在客户端被执行。
执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染；

在这里插入图片描述

12.2.3 Hydration

什么是Hydration？这里引入 vite-plugin-ssr 插件的官方解释。

在这里插入图片描述

在进行 SSR 时，我们的页面会呈现为 HTML。

但仅 HTML 不足以使页面具有交互性。例如，浏览器端 JavaScript 为零的页面不能是交互式的（没有 JavaScript 事件处理程序来响应用户操作，例如单击按钮）。
为了使我们的页面具有交互性，除了在 Node.js 中将页面呈现为 HTML 之外，我们的 UI 框架（Vue/React/…）还要在浏览器中加载和呈现页面。（它创建页面的内部表示，然后将内部表示映射到我们在 Node.js 中呈现的 HTML 的 DOM 元素。）

这个过程称为hydration。

12.2.4 useId的作用

我们再来看一遍：useId 是一个用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。

所以我们可以得出如下结论：

useId是用于react的同构应用开发的，前端的SPA页面并不需要使用它；
useId可以保证应用程序在客户端和服务器端生成唯一的ID，这样可以有效的避免通过一些手段生成的id不一致，造成 hydration mismatch；

import React, { memo, useId, useState } from 'react'
const App = memo(() => {
  const [count, setCount] = useState(0);
  const id = useId();
  // 每一次渲染，id 都是一样的；刷新页面也是一样的
  console.log(id);
  return <div>
    <h2>计数:{ count}</h2>
    <button onClick={e=> setCount(count + 1)}></button>
    <label>
      用户名:
      <input type="text" id={ id }></input>
    </label>
  </div>;
})
export default App;

13. useTransition

官方解释：返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。

它其实在告诉react对于某部分任务的更新优先级较低，可以稍后进行更新。

【示例】
描述：nameArr 为一个数组，包含大量如(4万个name)；在input框中输入字符，根据字符会过滤出name列表；此时dom渲染会卡顿，input的输入删除不会及时更新，可以通过 useTransition 降低任务的优先级

import React, { memo, useState,useTransition } from "react";
import nameArr from "./array";
const App = memo(() => {
  const [arr, setArr] = useState(nameArr);
  const [pending,startTransition] = useTransition()
  function select(e) {
    startTransition(() => {
      const key = e.target.value;
      const newArr = nameArr.filter((item) => {
        return item.includes(key);
      });
      setArr(newArr);
    })
  }
  return (
    <div>
      <h2>名称列表：{pending && <span>loading</span>}</h2>
      <input type="text" onInput={select} />
      <ul>
        {arr.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
    </div>
  );
});
export default App;

14. useDeferredValue

官方解释：useDeferredValue 接受一个值，并返回该值的新副本，该副本将推迟到更紧急地更新之后。和 useDeferredValue 的作用是一样的效果，可以让我们的更新延迟。

import React, { memo, useState,useDeferredValue } from "react";
import nameArr from "./array";
const App = memo(() => {
  const [arr, setArr] = useState(nameArr);
  const deferArr = useDeferredValue(arr);
  function select(e) {
      const key = e.target.value;
      const newArr = nameArr.filter((item) => {
        return item.includes(key);
      });
      setArr(newArr);
  }
  return (
    <div>
      <h2>名称列表</h2>
      <input type="text" onInput={select} />
      <ul>
        {deferArr.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
    </div>
  );
});
export default App;