循序渐进学 react ＜四＞

原来是有理数

已于 2024-01-13 17:41:43 修改

阅读量904

点赞数 23

文章标签： react.js 前端前端框架 react javascript

于 2024-01-13 17:29:27 首次发布

本文链接：https://blog.csdn.net/m0_68076330/article/details/135573005

版权

react 完~

在这里插入图片描述

十、React Hooks 解析

10. 1 Hook

分类
- 特殊场景才会用到的 hook
- 性能优化 hook
- 自定义 hooks
- react 18 新增 hook
Hook 是 React 16.8 的新增特性，它可以在不编写 class 的情况下使用 state 以及其他的 React 特性（比如生命周期）

class HelloWord extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello World",
    };
  }
  changeText() {
    this.setState({ message: "你好lili" });
  }
  render() {
    const { message } = this.state;
    return (
      <div>
        <h1>内容：{message}</h1>
        <button onClick={(e) => this.changeText()}>修改文本</button>
      </div>
    );
  }
}
function HelloWord2(props) {
  let message = "hello world";
  // 函数式组件存在的最大的缺陷
  // 1. 组件不会被重新渲染：修改 message 之后，组件不知道自己要重新渲染
  // 2. 如果页面重新渲染了：函数会被重新执行，第二次重新执行时，会重新给 message赋值为 hello world
  // 3. 类似于生命周期的回调：也是没有的
  return (
    <div>
      <h2>内容2：{message}</h2>
      <button onClick={(e) => (message = "你好lili")}>修改文本</button>
    </div>
  );
}

class 组件相对于函数式组件优势
- class 组件可以定义自己的 state，用来保存组件自己内部的状态
  - 函数式组件不可以，因为函数每次调用都会产生新的临时变量
    - 函数式组件存在的最大的缺陷
      - 组件不会被重新渲染：修改 message 之后，组件不知道自己要重新渲染
      - 如果页面重新渲染了：函数会被重新执行，第二次重新执行时，会重新给 message 赋值为 hello world
      - 类似于生命周期的回调：也是没有的
- class 组件有自己的生命周期，可以在对应的生命周期中完成自己的逻辑
  - 比如在 componentDidMount 中发送网络请求，并且该生命周期函数只会执行一次
  - 函数式组件在使用 hooks 之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求
- class 组件可以在状态改变时只会重新执行 render 函数以及希望重新调用的生命周期函数 componentDidUpdate 等
  - 函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次

10.2 Class 组件存在的问题

复杂组件变得难以理解：
- 在最初编写一个 class 组件时，往往逻辑比较简单，并不会非常复杂。但是随着业务的增多，class 组件会变得越来越复杂
- 比如 componentDidMount 中，可能就会包含大量的逻辑代码：包括网络请求、一些事件的监听（还需要在 componentWillUnmount 中移除）
- 而对于这样的 class 实际上非常难以拆分：因为它们的逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度
难以理解的 class：
- 在 class 中，必须搞清楚 this 的指向到底谁
组件复用状态很难：
- 在前面为了一些状态的复用需要通过高阶组件
- redux 中 connect 或者 react-router 中的 withRouter，这些高阶组件设计的目的就是为了状态的复用
- 或者类似于 Provider、Consumer来共享一些状态，但是多次使用 Consumer 时，代码就会存在很多嵌套
- 这些代码不管是编写和设计上来说，都变得非常困难

10.3 Hook 的出现

简单总结一下 hooks：
- 在不编写 class 的情况下使用 state 以及其他的 React 特性
- 但是可以由此延伸出非常多的用法，来让前面所提到的问题得到解决
Hook 的使用场景：
- Hook 的出现基本可以代替之前所有使用 class 组件的地方
- 但是如果是一个旧的项目，并不需要直接将所有的代码重构为 Hooks ，因为它完全向下兼容，可以渐进式的来使用它
- Hook 只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用
请记住 Hook 是：
- 完全可选的**：**无需重写任何已有代码就可以在一些组件中尝试 Hook
- 100% 向后兼容的**：**Hook 不包含任何破坏性改动
- 现在可用**：**Hook 已发布于 v16.8.0
函数式组件结合hooks让整个代码变得非常简洁
并且再也不用考虑this相关的问题

10.4 计数器案例对比

类组件

import React, { PureComponent } from "react";

export class CounterClass extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  increment() {
    this.setState({
      counter: this.state.counter + 1,
    });
  }
  decrement() {
    this.setState({
      counter: this.state.counter - 1,
    });
  }
  render() {
    const { counter } = this.state;
    return (
      <div>
        <h1>CounterClass</h1>
        <h2>当前计数:{counter}</h2>
        <button onClick={(e) => this.decrement()}>-1</button>
        <button onClick={(e) => this.increment()}>+1</button>
      </div>
    );
  }
}

export default CounterClass;

函数式组件

import React, { memo, useState } from "react";
// useState 的作用：在函数式组件中定义状态

const CounterHook = memo(() => {
  // 仅仅是作为初始化值,内部已经生成初始化值了
    //是一个数组：一为状态，二为函数
  const [counter,setCounter] = useState(0);
  // 没有意义
  // let counter = 0
  return (
    <div>
      <h1>CounterHook</h1>
      <h2>当前计数：{counter}</h2>
      {/* 点击按钮修改状态 */}
      {/* 第二个东西是函数,对函数进行调用,传入一个参数,状态发生改变当前组件会被重新渲染 */}
      <button onClick={(e) => setCounter(counter-1)}>-1</button>
      <button onClick={(e) => setCounter(counter+1)}>+1</button>
    </div>
  );
});

export default CounterHook;

10.5 useState

useState 来自 react，需要从 react 中导入，它是一个 hook
- 参数：初始化值，如果不设置为 undefined
- 返回值：数组，包含两个元素
  - 元素一：当前状态的值（第一调用为初始化值）
  - 元素二：设置状态值的函数
点击 button 按钮后，会完成两件事情
- 调用 setCount，设置一个新的值
- 组件重新渲染，并且根据新的值返回 DOM 结构
Hook 就是 JavaScript 函数，这个函数可以帮助钩入（hook into） React State 以及生命周期等特性
- 钩入状态
- 钩入生命周期
但是使用它们会有两个额外的规则：
- 只能在函数最外层调用 Hook，不要在循环、条件判断或者子函数中调用
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用
- 在自定义的 hooks 中，可以使用 react 提供的其他 hooks：必须以 use 开头

// useState 的作用：在函数式组件中定义状态
function useFoo() {
  const [message] = useState('hello world')
  return message
}

Hook 指的类似于 useState、useEffect 这样的函数；Hooks 是对这类函数的统称
State Hook 的 API 就是 useState
- **useState **定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同
  - 一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留
- useState 接受唯一一个参数，在第一次组件被调用时使用来作为初始化值（如果没有传递参数，那么初始化值为 undefined）
- **useState **的返回值是一个数组，可以通过数组的解构，来完成赋值会非常方便
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

import React, { memo } from "react";
import { useState } from "react";

const App = memo(() => {
  const [message, setMessage] = useState("hello lili");
  function changeMessage() {
    setMessage("你好啊，hhh");
  }

  return (
    <div>
      <h1>App:{message}</h1>
      <button onClick={(e) => changeMessage()}>修改文本</button>
    </div>
  );
});

export default App;

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

10.6 Effect Hook

Effect Hook 可以来完成一些类似于 class 中生命周期的功能
事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是 React 更新 DOM 的一些副作用（Side Effects）
所以对于完成这些功能的 Hook 被称之为 Effect Hook
- 放一些副作用的东西
- 当前传入的回调函数会在组件被渲染完成后，自动执行
类组件

import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      counter: 100,
    };
  }
  componentDidMount() {
    document.title = this.state.counter;
  }
  componentDidUpdate() {
    document.title = this.state.counter;
  }
  render() {
    const { counter } = this.state;
    return (
      <div>
        <h1>计数：{counter}</h1>
        <button onClick={(e) => this.setState({ counter: counter + 1 })}>changeCount</button>
      </div>
    );
  }
}

export default App;

函数组件

import React, { memo } from "react";
import { useState, useEffect } from "react";

const App = memo(() => {
  const [count, setCount] = useState(1000);
  // 放在这里基本逻辑不合适，有点格格不入，是一个副作用，希望放在独立的地方
  // 函数式组件目的：告诉 react 要渲染什么内容
  // document.title = count;

  useEffect(() => {
    // 传入回调函数，当组件渲染完成之后会自动执行
    // 网络请求/dom操作（修改标题）/事件监听
    document.title = count;
  });
  return (
    <div>
      <h1>当前计数：{count}</h1>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
    </div>
  );
});

export default App;

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

10.7 需要清除 Effect

在 class 组件的编写过程中，某些副作用的代码，需要在 componentWillUnmount 中进行清除：
- 比如之前的事件总线或 Redux 中手动调用 subscribe
- 都需要在 componentWillUnmount 有对应的取消订阅
- Effect Hook 通过什么方式来模拟 componentWillUnmount 呢
hook 为了增加代码的内聚性：监听的代码和取消监听的代码是放在一块的
useEffect 传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B
- type EffectCallback = () => (void | (() => void | undefined));
为什么要在 effect 中返回一个函数
- 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数
- 如此可以将添加和移除订阅的逻辑放在一起
- 它们都属于 effect 的一部分
React 何时清除 effect
- React 会在组件更新和卸载的时候执行清除操作
- 正如之前学到的，effect 在每次渲染的时候都会执行

import React, { memo } from "react";
import { useState } from "react";
import { useEffect } from "react";

const App = memo(() => {
  const [count, setCount] = useState(1000);
  // 负责告知 react ，在执行完当前组件渲染之后要执行的副作用代码
  useEffect(() => {
    // 1. 监听所有事件
    // const unsubscribe = store.subscribe(() => {
    // })
    // function foo() {
    // }
    // eventBus.on('lili', foo)
    // 点击多少次就会监听多少次
    // 每次进行新的监听之前需要把原来的监听取消掉
    console.log("监听 redux 中数据的变化，监听 eventBus 中的 lili 事件");
    // 2. 取消监听
    // 传入的回调函数本身有一个返回值：该返回值是一个回调函数
    // 这个回调函数会在组件 重新渲染 或者 组件卸载 的时候执行
    return () => { 
console.log('取消监听 redux 中的数据变化,取消监听 eventBus 的 lili 事件监听');
    }
  });
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
    </div>
  );
});

export default App;

10.8 使用多个 Effect

一个函数式组件中可以存在多个 useEffect，会按照编写的顺序依次执行
- 逻辑独立
- 可以放在自定义 hook 中,让别的组件完成复用
Hook 允许按照代码的用途分离它们， 而不是像生命周期函数那样

import React, { memo } from "react";
import { useState } from "react";
import { useEffect } from "react";

const App = memo(() => {
  const [count, setCount] = useState(1000);
  // 负责告知 react ，在执行完当前组件渲染之后要执行的副作用代码
  // useEffect(() => {
  //   // 1. 修改 document 的 title（1 行）
  //   // 2. 对 redux 中数据变量监听（10 行）
  //   // 3. 监听 eventBus 中的 lili 事件（15 行）
  //   // 完成过多逻辑导致阅读性非常差
  //   return () => {
  //   };
  // });
  useEffect(() => {
    // 1. 修改 document 的 title（1 行）
    console.log("修改标题");
  });
  useEffect(() => {
    // 2. 对 redux 中数据变量监听（10 行）
    console.log("监听 redux 中的数据");
    return () => {
      // 取消 redux 中数据的监听
    };
  });
  useEffect(() => {
    console.log("监听 lili 事件");
    // 3. 监听 eventBus 中的 lili 事件（15 行）
  });
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
    </div>
  );
});

export default App;

10.9 Effect 性能优化

默认情况下，useEffect 的回调函数会在每次渲染时都重新执行，但是这会导致两个问题：
- 某些代码只是希望执行一次即可，类似于componentDidMount和componentWillUnmount 中完成的事情（比如网络请求、订阅和取消订阅）
- 另外，多次执行也会导致一定的性能问题
useEffect 实际上有两个参数：
- 参数一：执行的回调函数
- 参数二：该 useEffect 在哪些 state 发生变化时，才重新执行（受谁的影响）
  - 不希望依赖任何的内容时，不受谁的影响，也可以传入一个空的数组 []
  - 类似于 componentDidMount 和 componentWillUnmount 中

import React, { memo } from "react";
import { useState } from "react";
import { useEffect } from "react";

const App = memo(() => {
  const [count, setCount] = useState(1000);
  const [message, setMessage] = useState("hello world");
  useEffect(() => {
    console.log("修改标题", count);
  }, [count]);
  useEffect(() => {
    console.log("监听 redux 中的数据");
    return () => {};
    // 谁的影响都不受
  }, []);
  useEffect(() => {
    console.log("监听 lili 事件");
    return () => {};
  }, []);
  useEffect(() => {
    console.log("发送网络请求，从服务器获取数据");
    return () => {
      console.log("在组件被卸载时，才会执行一次");
    };
  }, []);
  //参数： 回调函数，数组类型
  useEffect(() => {}, []);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
      <h1>message：{message}</h1>
      <button onClick={(e) => setMessage("nihoahaohhaohao")}>修改 message</button>
    </div>
  );
});

export default App;

可以模拟生命周期，但是它比原来的生命周期要更加强大，作用是执行副作用

特殊场景才会用到的 hooks

性能优化 hook

自定义 hooks

react 18 新增的 hook

10.10 useContext 的使用

在之前的开发中，要在组件中使用共享的 Context 有两种方式：
- 类组件可以通过类名 .contextType = MyContext 方式，在类中获取 this.context
- 多个 Context 或者在函数式组件中通过 MyContext.Consumer 方式共享 context

import React, { memo, useContext } from "react";
import { UserContext, ThemeContext } from "./context";
const App = memo(() => {
  // 使用 Context,通过返回值取出来

  const user = useContext(UserContext);

  const theme = useContext(ThemeContext);
  return (
    <div>
      {/* <UserContext.Consumer>
        {
          value => {
            return <h2><ThemeContext.Consumer>{ value=>}</ThemeContext.Consumer></h2>
          }
        }
      </UserContext.Consumer> */}
      {/* 以上做法太麻烦了，使用 hook */}
      <h1>
        User:{user.name}-{user.level}
      </h1>
      <h1 style={{ color: theme.color, fontSize: theme.size }}>
        Theme:{theme.color}-{theme.size}
      </h1>
    </div>
  );
});

export default App;

import { createContext } from "react";

const UserContext = createContext()
const ThemeContext = createContext()
export {
  UserContext,ThemeContext
}

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

10.11 useReducer

useReducer 仅仅是 useState 的一种替代方案
- 在某些场景下，如果 state 的处理逻辑比较复杂，可以通过 useReducer 来对其进行拆分
- 或者这次修改的 state 需要依赖之前的 state 时，也可以使用
使用的很少

import React, { memo } from "react";
import { useReducer } from "react";
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { ...state, counter: state.counter + 1 };
    case "decrement":
      return { ...state, counter: state.counter - 1 };
    case "add_number":
      return { ...state, counter: state.counter + action.num };
    case "sub_number":
      return { ...state, counter: state.counter - action.num };
    default:
      return state;
  }
}
const App = memo(() => {
  // 在这里进行初始化值
  const [state, dispatch] = useReducer(reducer, { counter: 110 ,friend:[],user:{}});
  // const [count, setCount] = useState(0);
  return (
    <div>
      {/* <h1>App count:{count}</h1>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
      <button onClick={(e) => setCount(count - 1)}>-1</button>
      <button onClick={(e) => setCount(count + 10)}>+10</button>
      <button onClick={(e) => setCount(count - 10)}>-10</button>
      <button onClick={(e) => setCount(count + 100)}>+100</button>
      <button onClick={(e) => setCount(count - 100)}>-100</button> */}
      <h1>App count:{state.counter}</h1>
      <button onClick={(e) => dispatch({ type: "increment" })}>+1</button>
      <button onClick={(e) => dispatch({ type: "decrement" })}>-1</button>
      <button onClick={(e) => dispatch({ type: "add_number", num: 10 })}>+10</button>
      <button onClick={(e) => dispatch({ type: "sub_number", num: 10 })}>-10</button>
      <button onClick={(e) => dispatch({ type: "add_number", num: 100 })}>+100</button>
      <button onClick={(e) => dispatch({ type: "sub_number", num: 100 })}>-100</button>
    </div>
  );
});

export default App;

10.12 useCallback

第一次渲染组件 => increment 会被定义一次
- 重新渲染，这个函数又会被定义一次

import React, { memo, useState, useCallback } from "react";
// 当 props 属性发生改变时，组件会被重新渲染
const LILIIncrement = memo(function (props) {
  const { increment } = props;
  return (
    <div>
      <button onClick={increment}>increment+1</button>
    </div>
  );
});
const App = memo(() => {
  const [count, setCount] = useState(0);
  // 每次重新渲染都会对该函数进行内存创建
  // 表达式的方式
  // const increment = e => {
  //   setCount(count+1)
  // }
  // 函数声明的方式
  // function increment() {
  //   setCount(count+1)
  // }
  // 作为 callback 的参数，但是传入的函数仍是有重新定义，并没有意义
  // 闭包陷阱：捕获定义时候外层变量的值，还是原来的那个值
  const increment = useCallback(
    function () {
      setCount(count + 1);
    },
    [count]
  );
  // 普通的函数
  // const increment = e => {
  //   setCount(count+1)
  // }
  return (
    <div>
      <h2>计数：{count}</h2>
      <button onClick={increment}>+1</button>
      {/* 把这个函数传递给子组件 */}
      <LILIIncrement increment={increment} />
    </div>
  );
});

function foo(name) {
  function bar() {
    console.log(name);
  }
  return bar;
}
const bar1 = foo("lili");
bar1(); //lili
export default App;

useCallback 实际的目的是为了进行性能的优化
useCallback 会返回一个函数的 memoized（记忆的）值（多次执行，返回的是同一个函数）
在依赖不变的情况下，多次定义的时候，返回的值是相同的
还是会重新定义，但是 useCallBack 会决定到底要不要使用它
把一个函数传给子组件的时候才有性能优化
性能优化的点
- 需要将一个函数传递给子组件时，最好使用 useCallback 进行优化，将优化之后的函数传递给子组件
通常使用 useCallback 的目的是不希望子组件进行多次渲染，并不是为了函数进行缓存

10.13 useRef

  //进一步得到优化：当 count 发生改变时，也使用同一个函数
  // 做法一：将 count 依赖移除，缺点：闭包陷阱
  // 做法二：useRef，在组件多次渲染时，返回的是同一个值
  const countRef = useRef()
  countRef.current = count
  const increment = useCallback(
    function () {
      setCount(countRef.current + 1);
    },
    []
  );

useRef 返回一个 ref 对象，返回的 ref 对象在组件的整个生命周期保持不变
最常用的 ref 是两种用法：
- 用法一：绑定 DOM（或者组件，但是需要是 class 组件）元素
- 用法二：保存一个数据，这个对象在整个生命周期中可以保存不变
  - 不管调用多少次 ref，返回的都是同一个对象

import React, { memo,useRef } from 'react'
import { useEffect } from 'react'

const App = memo(() => {
  const titleRef = useRef()
  const  inputRef= useRef()
  function showTitleDom() {
    console.log(titleRef.current);
    inputRef.current.focus()
  }
  return (
    <div>
      <h2 ref={titleRef}>hello world</h2>
      <input type="text" ref={inputRef}/>
      <button onClick={showTitleDom}>check title dom</button>
    </div>
  )
})

export default App

import React, { memo, useRef } from "react";
import { useCallback } from "react";
import { useState } from "react";
import { useEffect } from "react";

const App = memo(() => {
  const [count, setCount] = useState(0);

  const nameRef = useRef();
  // 通过 countRef解决闭包陷阱
  const countRef = useRef();
  countRef.current = count;
  const increment = useCallback(() => {
    setCount(countRef.current + 1);
  }, []);
  return (
    <div>
      <h2>hello world:{count}</h2>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
      <button onClick={increment}>+1</button>
    </div>
  );
});

export default App;

10.14 useMemo

是一个单独的 hook，传入回调函数，优化的是函数的返回值
返回有记忆的值，不是函数本身，跟传入的回调函数没有关系，对函数返回的值进行优化
useMemo 返回的也是一个 memoized（记忆的）值
在依赖不变的情况下，多次定义的时候，返回的值是相同的

import React, { memo } from "react";
import { useCallback } from "react";
import { useMemo } from "react";
import { useState } from "react";
// 在别的地方可能也会用到，放在独立的函数中
function calcNumTotal(num) {
  console.log("total 计算过程被调用");
  let total = 0;
  for (let i = 1; i <= num; i++) {
    total += i;
  }
  return total;
}
const App = memo(() => {
  const [count, setCount] = useState(0);
  const result = useMemo(() => {
    // 优化函数的返回值,以后就不需要重新执行了
    return calcNumTotal(count*2);
  }, [count]);

  // function fn() {}
  // const increment = useCallback(fn, []);
  // const increment2 = useMemo(() => fn);

  return (
    <div>
      <h1>计算结果：{result}</h1>
      <h3>计数器：{count}</h3>
      <button onClick={(e) => setCount(count + 1)}>+1 </button>
    </div>
  );
});

export default App;

优化
- 进行大量的计算操作，是否有必须要每次渲染时都重新计算
- 对子组件传递相同内容的对象时，使用 useMemo 进行性能的优化

10.15 useImperativeHandle

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

import React, { memo, forwardRef,useImperativeHandle} from "react";
import { useRef } from "react";
const HelloWorld = memo(
  forwardRef((props, ref) => {
    const inputRef = useRef()
    // 子组件对父组件传入的 ref 进行处理
    useImperativeHandle(ref, () => {
      return {
        focus() {
          console.log("focus");
            //父组件中让子组件聚焦
          inputRef.current.focus()
        },
        setValue(value) {
          inputRef.current.value = value
        }
      }
    })
    return <input type='text' ref={inputRef}/>;
  })
);
const App = memo(() => {
  const titleRef = useRef();
  const inputRef = useRef();
  function handleDOM() {
    console.log(titleRef.current);
    console.log(inputRef.current);
    // titleRef.current;
    inputRef.current.focus();
    // inputRef.current.value =''
    inputRef.current.setValue('hhh哈哈哈')
  }
  return (
    <div>
      <h2 ref={titleRef}>哈哈哈哈</h2>
      <HelloWorld ref={inputRef} />
      <button onClick={handleDOM}>DOM 操作</button>
    </div>
  );
});

export default App;

10.16 useLayoutEffect

useLayoutEffect 看起来和 useEffect非常的相似，事实上他们也只有一点区别而已
- useEffect 会在渲染的内容更新到 DOM 上后执行，才执行里面的回调，不会阻塞 DOM 的更新
- useLayoutEffect 会在渲染的内容更新到 DOM 上之前执行，会阻塞 DOM 的更新
希望在某些操作发生之后再更新 DOM，那么应该将这个操作放到useLayoutEffect
更推荐使用 useEffect 而不是 useLayoutEffect

import React, { memo, useEffect, useState ,useLayoutEffect} from "react";

const App = memo(() => {
  const [count, setCount] = useState(999);
  useEffect(() => { });
  // 在内容显示在屏幕之前发现渲染的数据不对，需要调节
  useLayoutEffect(()=>{ })
  return (
    <div>
      <h2>count:{count}</h2>
      <button onClick={(e) => setCount(55)}>+1</button>
    </div>
  );
});

export default App;

切换闪烁现象

import React, { memo, useEffect, useState, useLayoutEffect } from "react";

const App = memo(() => {
  const [count, setCount] = useState(999);
  useEffect(() => {
    if (count === 0) {
      setCount(Math.random() + 200);
    }
  });
  // 在内容显示在屏幕之前发现渲染的数据不对，需要调节
  useLayoutEffect(() => {});
  return (
    <div>
      <h2>count:{count}</h2>
      <button onClick={(e) => setCount(0)}>设置为 0 </button>
    </div>
  );
});

export default App;

10.17 自定义Hook

本质上只是一种函数代码逻辑的抽取，严格意义上来说，本身并不算 react 的特性
名字必须用 use 开头
提高代码的复用性

10.17.1 打印生命周期

import React, { memo, useEffect, useState } from "react";
function useLogLife(cName) {
  useEffect(() => {
    console.log(cName + "组件被创建");
    return () => {
      console.log(cName + "组件被销毁");
    };
  }, []);
}
const Home = memo(() => {
  useLogLife("home");
  return <h1>Home Page</h1>;
});
const About = memo(() => {
  useLogLife("about");
  return <h2>About Page</h2>;
});
const App = memo(() => {
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      <h1>App Root</h1>
      <button onClick={(e) => setIsShow(!isShow)}>切换</button>
      {isShow && <Home />}
      {isShow && <About />}
    </div>
  );
});

export default App;

10.17.2 从 context 中获取数据

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

import useUserToken from "./useUserToken";
export {
  useUserToken
}

import React, { memo, useContext, useEffect, useState } from "react";
import {UserContext,TokenContext } from './context'
import { useUserToken } from "./hooks";
// User/Token
const Home = memo(() => {
  const [user,token] = useUserToken()
  // const user = useContext(UserContext)
  // const token = useContext(TokenContext)
  return <h1>Home Page-{user}-{ token}</h1>;
});
const About = memo(() => {
  const [user,token] = useUserToken()
  // const user = useContext(UserContext)
  // const token = useContext(TokenContext)
  return <h2>About Page-{user}-{ token}</h2>;
});
const App = memo(() => {
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      <h1>App Root</h1>
      <button onClick={(e) => setIsShow(!isShow)}>切换</button>
      {isShow && <Home />}
      {isShow && <About />}
    </div>
  );
});

export default App;

10.17.3 获取滚动位置

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

import React, { memo,useState } from "react";

import { useScrollPosition} from "./hooks";
import "./style.css";

const Home = memo(() => {
  const [scrollX, scrollY] = useScrollPosition();
  return (
    <h2>
      Home Page-{scrollX}-{scrollY}
    </h2>
  );
});
const About = memo(() => {
  const [scrollX, scrollY] = useScrollPosition();
  return (
    <h2>
      About Page-{scrollX}-{scrollY}
    </h2>
  );
});
const App = memo(() => {
  const [isShow, setIsShow] = useState(true);
  return (
    <div className='app'>
      <h1>App Root</h1>
      <button onClick={(e) => setIsShow(!isShow)}>切换</button>
      {isShow && <Home />}
      {isShow && <About />}
    </div>
  );
});

export default App;

10.17.4 localStorage 数据存储

import { useEffect, useState } from "react";

function useLocalStorage(key) {
  const [data, setData] = useState(() => {
    const item = localStorage.getItem(key)
    if(!item)return ''
    return JSON.parse(item)
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(data));
  }, [data]);
  return [data, setData];
}
export default useLocalStorage;

import React, { memo, useEffect, useState } from "react";
import { useLocalStorage } from "./hooks";

const App = memo(() => {
  // 通过 key，直接从 localStorage 中获取数据

  // const [token, setToken] = useState(localStorage.getItem("token"));
  // useEffect(() => {
  //   localStorage.setItem("token", token);
  // }, [token]);
  const [token, setToken] = useLocalStorage("token");
  function setTokenHandle() {
    setToken("aaaaaaaaaaaaa");
  }
  // const [avatarUrl, setAvatarUrl] = useState(localStorage.getItem("avatarUrl"));
  // useEffect(() => {
  //   localStorage.setItem("avatarUrl", avatarUrl);
  // }, [avatarUrl]);
  const [avatarUrl, setAvatarUrl] = useLocalStorage("avatarUrl");
  function setAvatarUrlHandle() {
    setAvatarUrl("http://www.sep.comdddddddddd");
  }
  return (
    <div>
      <h1>App</h1>
      <button onClick={setTokenHandle}>设置 token</button>
      <h2>{token}</h2>
      <button onClick={setAvatarUrlHandle}>设置新头像地址</button>
      <h2>{avatarUrl}</h2>
    </div>
  );
});

export default App;

10.18 redux hooks

在之前的 redux 开发中，为了让组件和 redux 结合起来，使用了react-redux中的 connect：
- 但是这种方式必须使用高阶函数结合返回的高阶组件
- 并且必须编写：mapStateToProps和 mapDispatchToProps映射的函数
安装：npm i @reduxjs/toolkit react-redux

import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 99,
  },
  reducers: {
      // store
    addNumberAction(state, { payload }) {
      state.count = state.count + payload;
    },
    subNumberrAction(state, { payload }) {
      state.count = state.count - payload;
    },
  },
});
export const {addNumberAction,subNumberAction}=counterSlice.actions
export default counterSlice.reducer

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counter'
const store = configureStore({
  reducer: {
    counter:counterReducer
  }
})
export default store

import React, { memo } from "react";
import { connect } from "react-redux";
import { addNumberAction, subNumberAction } from "./store/modules/counter";
const App = memo((props) => {
  const { count,addNumber,subNumber } = props;
  function addNumberHandle(num,isAdd = true) {
    if (isAdd) {
      addNumber(num)
    } else {
      subNumber(num)
    }
  }
  return (
    <div>
      <h2>当前计数：{count}</h2>
      <button onClick={e=>addNumberHandle(1)}>+1</button>
      <button onClick={e=>addNumberHandle(6)}>+6</button>
      <button onClick={e=>addNumberHandle(9)}>+9</button>
    </div>
  );
});
const mapStateToProps = (state) => ({
  count: state.counter.count,
});
const mapDispatchToProps = (dispatch) => ({
  addNumber(num) {
    dispatch(addNumberAction(num));
  },
  subNumber(num) {
    dispatch(subNumberAction(num));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(App);

import React from "react";
import ReactDOM from "react-dom/client";
import { UserContext, TokenContext } from './12_自定义Hooks/context/index'
import { Provider } from "react-redux";
import store from "./13_redux中的hooks/store";
import App from "./13_redux中的hooks/App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <UserContext.Provider value={{ name: "lili", level: 100 }}>
    <TokenContext.Provider value={'lili'}>
      <Provider store = {store}>
      <App />
     </Provider>
    </TokenContext.Provider>
  </UserContext.Provider>

);

在Redux 7.1开始，提供了Hook的方式，再也不需要编写 connect 以及对应的映射函数了
代码优化：
useSelector 的作用是将 state 映射到组件中，默认监听的是整个 state
- 参数一：将state映射到需要的数据中
- 参数二：可以进行比较来决定是否组件重新渲染，引入 shallowEqual
useDispatch 非常简单，就是直接获取 dispatch 函数，之后在组件中直接使用即可

import React, { memo } from "react";
import { UseSelector, useSelector,useDispatch } from "react-redux";
import { addNumberAction, subNumberAction } from "./store/modules/counter";
const App = memo((props) => {
  // 1. 使用 useSelectore 将 redux 中 store 的数据映射到组件内
 const  {count}= useSelector((state) => ({
    count:state.counter.count
 }))
  // 2. 
  const dispatch = useDispatch()
  function addNumberHandle(num,isAdd = true) {
    if (isAdd) {
   dispatch(addNumberAction(num))
    } else {
     dispatch(subNumberAction(num))
    }
  }
  return (
    <div>
      <h2>当前计数：{count}</h2>
      <button onClick={e=>addNumberHandle(1)}>+1</button>
      <button onClick={e=>addNumberHandle(6)}>+6</button>
      <button onClick={e=>addNumberHandle(9,false)}>-9</button>
    </div>
  );
});

export default (App);

useSelector 默认会比较返回的两个对象是否相等
- const refEquality = (a, b) => a === b
- 也就是必须返回两个完全相等的对象才可以不引起重新渲染

10.19 useId

node => vue/react 服务器端渲染 API => nuxt/next
用于生成横跨服务器端和客户端的稳定的唯一 ID的同时避免 hydration 过程中 id 不匹配的 hook
- 动态生成 id 发现 id mismatch
- 用于 react 的同构应用开发
请求一个文件：index.html，SPA页面里是没有多少内容的
- 不需要重新渲染，某种程序上提高渲染性能
- spa 页面不用
SSR
- 服务器端渲染，指的是页面在服务器端已经生成了完成的 HTML 页面结构，不需要浏览器通过执行 js 代码来创建页面结构
- 对应的是 CSR,客户端渲染，SPA 页面
- 早就把网站渲染好了
SPA：单页面富应用
- 首屏的渲染速度
  - 根据域名请求文件：index.html
  - script src = “bundle.js”
  - 下载 bundle.js
  - 浏览器执行一次bundle.js代码
  - 内容才显示出来
- 不利于 SEO 优化
  - 搜索引擎优化
  - 百度：爬虫，主要爬取 index.html，对其他的要渲染的东西很少爬取，收录到数据库里面，对使用关键字对数据库进行匹配
    - 请求一个文件：index.html
      - SPA页面里是没有多少内容的
      - body => div id = root
      - meta 配置
    - 爬取的内容少，收录的内容少，没有带来流量
SPA
- 下载 index.html
- 下载 js 文件，并且执行 js 文件，生成 html 页面结构
  - 借助 Node 提前完成网页的结构 =》 Vue/React SSR =》nuxt/next

import React, { memo, useId, useState } from 'react'

const App = memo(() => {
  const [count, setCount] = useState(0)
  
  const id = useId
  console.log(id);
  return (
    <div>
      <button onClick={e => setCount(count + 1)}>count+1:{count}</button>
      <label htmlFor={id}>
        <input  id={id} type="text" />
      </label>
    </div>
  )
})

export default App

10.20 SSR 同构应用

同构：一套代码既可以在服务端运行又可以在客户端运行
- 最早在 angular 中出现
直接从 node 中输出的 html 页面的结构相当于是一串字符串，没有绑定任何 js 的东西
- 只能完成展示页面结构
- 在浏览器中运行一遍代码才能交互，是为了往里面注入 hydrate
同构是一种 SSR 的形态，是现代 SSR 的一种表现形式
- 当用户发生请求时，先在服务器通过 SSR 渲染出首页的内容
- 但对应的代码同样可以在客户端被执行
- 执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染

10.21 Hydration

在同构里面的某一个步骤
在进行 SSR 时，页面会呈现为 HTML
- 但仅仅 HTML 不足以使页面具有交互性
- 为了使页面具有交互性，除了在 Node.js 中将页面呈现为HTML 之外 ,UI 框架还在浏览器中加载和呈现页面

10.22 useTransition

**官方解释：**返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数
useTransition:告诉 react 对于某部分任务的更新优先级较低，可以稍后进行更新
fake 假数据：npm i --save-dev @faker-js/faker

import React, { memo, useState } from 'react'
import namesArray from './namesArray'
const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray)
  function valueChangeHandle(event) {
    const keyword = event.target.value
    const filterShowNames = namesArray.filter(item => item.includes(keyword))
    setShowNames(filterShowNames)
  }
   return (
    <div>
      <input type="text" onInput={valueChangeHandle} />
      <h2>用户名列表：</h2>
      <ul>
         {
           showNames.map(item => {
             return <li key={item}>{item }</li>
           })
      }
      </ul>
    </div>
  )
})

export default App

import { faker } from "@faker-js/faker";
// const namesArray = Array(1000).map(item => {
//   return faker.name.firstName()
// })
const namesArray = [];
for (let i = 0; i < 100; i++) {
  namesArray.push(faker.name.fullName());
}
console.log(namesArray);
export default namesArray;

使用

import React, { memo, useState, useTransition } from "react";
import namesArray from "./namesArray";
const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray);
  const [pending, startTransition] = useTransition();
  function valueChangeHandle(event) {
    startTransition(() => {
      const keyword = event.target.value;
      const filterShowNames = namesArray.filter((item) => item.includes(keyword));
      setShowNames(filterShowNames);
    });
  }
  // function valueChangeHandle(event) {
  //   const keyword = event.target.value
  //   const filterShowNames = namesArray.filter(item => item.includes(keyword))
  //   setShowNames(filterShowNames)
  // }
  return (
    <div>
      <input type='text' onInput={valueChangeHandle} />
      <h2>用户名列表：{ pending && <span>data loading</span>}</h2>
      <ul>
        {showNames.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
});

export default App;

10.23 useDeferredValue

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

import React, { memo, useState, useDeferredValue } from "react";
import namesArray from "./namesArray";
const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray);
  const deferedShowNames=useDeferredValue(showNames)
  function valueChangeHandle(event) {
   
      const keyword = event.target.value;
      const filterShowNames = namesArray.filter((item) => item.includes(keyword));
      setShowNames(filterShowNames);
 
  }
  return (
    <div>
      <input type='text' onInput={valueChangeHandle} />
      <h2>用户名列表：</h2>
      <ul>
        {deferedShowNames.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
});

export default App;