【React】React Hooks解析

React Hooks解析

React 16.8 +

认识和体验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，但是依然处理起来非常麻烦；
• 组件复用状态很难：
  • 口 在前面为了一些状态的复用我们需要通过高阶组件；
  • 口 像我们之前学习的redux中connect或者react-router中的withRouter，这些高阶组件设计的目的就是为了状态的复用；
  • 口 或者类似于Provider、Consumer来共享一些状态，但是多次使用Consumer时，我们的代码就会存在很多嵌套；
  • 口 这些代码让我们不管是编写和设计上来说，都变得非常困难；

Hook的出现

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

Class组件和Function组件对比

• 计数器案例

import React, { PureComponent } from 'react';

export class ClassCounter 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>
        <h2>ClassCounter 当前计数:{counter}</h2>
        <button onClick={(e) => this.increment()}>+1</button>
        <button onClick={(e) => this.decrement()}>-1</button>
      </div>
    );
  }
}

export default ClassCounter;

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

function HookCounter() {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <h2>HookCounter 当前计数:{counter}</h2>
      <button onClick={(e) => setCounter(counter + 1)}>+1</button>
      <button onClick={(e) => setCounter(counter - 1)}>-1</button>
    </div>
  );
}

export default memo(HookCounter);

State/Effect

useState解析

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

Tip：

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

认识useState

https://zh-hans.react.dev/reference/react/useState

• 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

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

• 口 "create”可能不是很准确，因为 state 只在组件首次渲染的时候被创建。

• 口 在下一次重新渲染时，useState 返回给我们当前的 state。

• 如果每次都创建新的变量，它就不是“state”了。

• 口 这也是 Hook 的名字总是以use 开头的一个原因。

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

认识Effect Hook

https://zh-hans.react.dev/reference/react/useEffect

• 目前，我们已经通过hook在函数式组件中定义state，那么类似于生命周期这些呢？
  • Effect Hook 可以让你来完成一些 类似于class中生命周期的功能；
  • 事实上，类似于 **网路请求、手动更新DOM、一些事件的监听，**都是 React 更新DOM的（Side Effects）;
  • 所以，**对于完成这些功能的Hook被称之为Effect Hook； **
• 需求：页面的title总显示counter的数字，分别使用class组件和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>
        <h2>计数：{counter}</h2>
        <button onClick={(e) => this.setState({ counter: counter + 10 })}>+10</button>
      </div>
    );
  }
}

export default App;

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

const App = memo(() => {
  const [counter, setCounter] = useState(100);
  useEffect(() => {
    // 当前传入回调函数会在组件被渲染完成后，自动执行
    // 网络请求/DOM操作（修改标题）/事件监听
    document.title = counter;
  });
  return (
    <div>
      <h2>计数：{counter}</h2>
      <button onClick={(e) => setCounter(counter + 10)}>+10</button>
    </div>
  );
});

export default App;

• 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中：

  // 负责告知react，在执行完当前组件渲染之后要执行的副作用代码
    useEffect(() => {
      // 1.修改document的title
      document.title = counter;
      console.log('修改title');
    });
    // 一个函数式组件中可以有多个useEffect：依次执行
    // 返回值： 回调函数 => 组件被重新渲染或者组件卸载时执行
    useEffect(() => {
      // 2. 对redux中数据的变化监听
      console.log('监听redux中的数据');
      return () => {
        // 2. 取消对redux中数据的变化监听
      };
    });
    useEffect(() => {
      // 3. 监听eventbus中的事件
      console.log('监听eventbus中的x事件');
      return () => {
        // 3. 取消监听eventbus中的事件
      };
    });
  

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

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

Effect 性能优化

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

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

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

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

• 案例：

  • 受counter影响的effect；

  import React, { memo, useEffect, useState } from 'react';
  
  const App = memo(() => {
    const [counter, setCounter] = useState(100);
    // 负责告知react，在执行完当前组件渲染之后要执行的副作用代码
    useEffect(() => {
      document.title = counter;
      console.log('修改title');
    }, [counter]);
    useEffect(() => {
      console.log('监听redux中的数据');
      return () => {};
    }, []);
    useEffect(() => {
      console.log('监听eventbus中的x事件');
      return () => {};
    }, []);
    useEffect(() => {
      console.log('发送网络请求：从服务器获取数据');
      return () => {
        console.log('组件卸载时执行时，才会执行一次');
      };
    }, []);
    return (
      <div>
        <h2>计数：{counter}</h2>
        <button onClick={(e) => setCounter(counter + 10)}>+10</button>
      </div>
    );
  });
  

• 但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组：[ ]

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

Context/Reducer

useContext的使用

useContext: https://zh-hans.react.dev/reference/react/useContext

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

// 以前
import React, { memo } from 'react';
import { ThemeContext, UserContext } from './context';

const App = memo(() => {
  // useContext
  return (
    <div>
      <h1>App</h1>
      <div>
        <h2>之前：</h2>
        <UserContext.Consumer>
          {(value) => {
            return (
              <div>
                <h3>
                  <ThemeContext.Consumer>
                    {(value) => <span style={{ color: value.color, fontSize: value.size }}> UserContext.Consumer</span>}
                  </ThemeContext.Consumer>
                </h3>
                <h4>value.name : {value.name}</h4>
                <h4> value.level: {value.level} </h4>
              </div>
            );
          }}
        </UserContext.Consumer>
      </div>
    </div>
  );
});

export default App;

const App = memo(() => {
  // useContext hook
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);
  return (
    <div>
      <h1>App</h1>
      <div>
        <h3> UserContext </h3>
        <h4>user.name : {user.name}</h4>
        <h4> user.level: {user.level} </h4>
        <h3 style={{ color: theme.color, fontSize: theme.size }}>ThemeContext</h3>
      </div>
    </div>
  );
});

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

useReducer

useReducerhttps://zh-hans.react.dev/reference/react/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 };
    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: 0, user: [], friends: {} });
  return (
    <div className="use-reducer">
      <h1>App</h1>
      <h2>counter 当前计数: {state.counter}</h2>
      <div className="btns">
        <button onClick={(e) => dispatch({ type: 'increment' })}>+1</button>
        <button onClick={(e) => dispatch({ type: 'decrement' })}>-1</button>
        <button onClick={(e) => dispatch({ type: 'add_number', num: 5 })}>+5</button>
        <button onClick={(e) => dispatch({ type: 'sub_number', num: 5 })}> -5</button>
        <button onClick={(e) => dispatch({ type: 'add_number', num: 100 })}>+100</button>
      </div>
    </div>
  );
});

Callback/Memo

useCallback

useCallback https://zh-hans.react.dev/reference/react/useCallback

// 闭包陷阱
function foo(name) {
  function bar() {
    console.log('name: ', name);
  }
  return bar;
}
const bar1 = foo('why');
bar1(); //name: why
bar1(); //name: why
const bar2 = foo('kobe');
bar2(); //name: kobe
bar1(); //name:  why

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

• 如何进行性能的优化呢？

  • 口 useCallback会返回一个函数的 memoized（记忆的）值；
  • 口 在**依赖不变的情况下，多次定义的时候，返回的值是相同的**；

    const memoizedCallback = useCallback(() => {
      console.log('memoizedCallback');
      doSomething(a,b)
    }, [a,b]);
  

• 案例

• 口 案例一：使用useCallback和不使用useCallback定义一个的数是否会带来性能的优化：

• 口 案例二：使用useCallback和不使用useCallback定义一个函数传递给子组件是否会带来性能的优化：
  
  

  import React, { memo, useCallback, useRef, useState } from 'react';
  
  /***
   * useCallback性能优化的点
   * 1.当需要将一个函数传递给子组件时，最好使用useCallback进行优化，将优化之后的函数，传递给子组件
   *
   */
  
  // props中的属性发送改变时，组件本身就会被重新渲染
  const HYincrement = memo((props) => {
    console.log('HYincrement被渲染');
    const { increment } = props;
  
    return (
      <div>
        <h2>子组件：HYincrement</h2>
        <button onClick={increment}>HYincrement + 1</button>
        {/* 100个子组件 */}
      </div>
    );
  });
  
  const App = memo(() => {
    // 使用 useCallback
    const [counter, setCounter] = useState(100);
    const [message, setMsg] = useState('hello');
  
    // const increment = (e) => {
    //   //普通函数
    //   setCounter(counter + 1);
    //   console.log('increment');
    // };
    // 闭包陷阱
    // const increment = useCallback(() => {
    //   console.log('increment');
    //   setCounter(counter + 1);
    // }, [counter]);
  
    // 进一步优化：当counter发生改变时，也使用同一个函数
    //  做法一：将counter依赖移除 -> 缺点：闭包陷阱
    //  做法二：useRef ,在组件多次渲染时，返回同一个值
  
    const counterRef = useRef();
    counterRef.current = counter;
    const increment = useCallback(() => {
      console.log('increment');
      setCounter(counterRef.current + 1);
    }, []);
    return (
      <div>
        <h1>App</h1>
        <h2>计数器: {counter}</h2>
        <button onClick={increment}>+1</button>
        <HYincrement increment={increment} />
        <h2>message:{message}</h2>
        <button onClick={(e) => setMsg(Math.random())}>setMsg</button>
      </div>
    );
  });
  
  // // 闭包陷阱
  // function foo(name) {
  //   function bar() {
  //     console.log('name: ', name);
  //   }
  //   return bar;
  // }
  // const bar1 = foo('why');
  // bar1(); //name: why
  // bar1(); //name: why
  // const bar2 = foo('kobe');
  // bar2(); //name: kobe
  // bar1(); //name:  why
  
  export default App;
  

• 通常使用useCallback的目的是不希望子组件进行多次渲染，井不是为了函数进行缓存；

useMemo

useMemo https://zh-hans.react.dev/reference/react/useMemo

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

• 如何进行性能的优化呢？

• 口 useMemo返回的也是一个 memoized（记忆的）值;

• 口 在依赖不变的情况下，多次定义的时候，返回的值是相同的；

const memoizedValue = useMemo(()=> computeExpensiveValue(a,b), [a,b])

• 案例：

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

  import React, { memo, useMemo, useState } from 'react';
  
  // 子组件
  const HelloWorld = memo(() => {
    console.log('HelloWorld 子组件');
    return (
      <div>
        <h3>子组件 HelloWorld</h3>
      </div>
    );
  });
  
  function calcNumTotal(num) {
    console.log('calcNumTotal计算过程～');
    const arr = [...new Array(num).keys()].map((item) => item + 1);
    return arr.reduce((total, prev) => {
      return (total += prev);
    }, 0);
  }
  
  const App = memo(() => {
    const [counter, setCounter] = useState(0);
  
    // 普通
    // const total = calcNumTotal(100);
    // 不依赖任何的值
    const total = useMemo(() => {
      return calcNumTotal(100);
    }, []);
  
    // 依赖 counter
    //   const total = useMemo(() => {
    //     return calcNumTotal(counter);
    //   }, [counter]);
    // useMemo 和 useCallback 的对比
    function fn() {}
    //   const increment = useCallback(fn,[])
    //   const increment = useCallback(() => fn, []);
  
    // 使用useMemo对子组件渲染进行优化
    //   const info = {
    //     name: 'why',
    //     age: 19,
    //   };
    const info = useMemo(() => ({ name: 'why', age: 19 }), []);
    return (
      <div>
        <h1>useMemo</h1>
        <div>
          <h2>计算结果： {total}</h2>
          <h2>计数器：{counter}</h2>
          <button onClick={(e) => setCounter(counter + 1)}>counter+1</button>
        </div>
        {/* total没有依赖时不会再次渲染子组件 */}
        <HelloWorld total={total} />
        <HelloWorld total={total} info={info} />
      </div>
    );
  });
  
  export default App;
  
  

Ref/LayoutEffect

useRef

useRef https://zh-hans.react.dev/reference/react/useRef

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

• 最常用的ref两种用法：

  • 用法一：引入DOM(或者组件，但是需要是class组件)元素；

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

  • 用法二：保持一个数据，这个对象在整个生命周期中可以保存下来；

  let obj = null;
  const App = memo(() => {
    const [counter, setCounter] = useState(0);
    const objRef = useRef();
    console.log(obj === objRef);
    obj = objRef;
  
    //通过useRef解决闭包陷阱
    const counterRef = useRef();
    counterRef.current = counter;
    const increment = useCallback(() => {
      // setCounter(counter + 1);
      setCounter(counterRef.current + 1);
    }, []);
    return (
      <div>
        <h1>App</h1>
        <h2>计数： {counter}</h2>
        <button onClick={(e) => setCounter(counter + 1)}> counter + 1</button>
      </div>
    );
  });
  

useImperativeHandle

useImperativeHandle https://zh-hans.react.dev/reference/react/useImperativeHandle

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

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

export default App;

useLayoutEffect

useLayoutEffect https://zh-hans.react.dev/reference/react/useLayoutEffect

Warning:useLayoutEffect 可能会影响性能。尽可能使用 useEffect。

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

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

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

• 案例：useEffect和useLayoutEffect的对比
  
  

• 官方更推荐使用useEffect而不是useLayoutEffect。

const App = memo(() => {
  const [counter, setCounter] = useState(100);
  // useEffect(() => {
  //   console.log('useEffect');
  //   if (counter === 0) {
  //     // 页面会有 0 一闪而过
  //     setCounter(Math.random() * 99);
  //   }
  // });
  useLayoutEffect(() => {
    console.log('useLayoutEffect');
    if (counter === 0) {
      setCounter(Math.random() * 99);
    }
  }, [counter]);
  console.log('app render');
  return (
    <div>
      <h1>App</h1>
      <h2>counter:{counter}</h2>
      <button onClick={(e) => setCounter(0)}>setCounter</button>
    </div>
  );
});

自定义Hooks使用

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

function useLoginLifeTime(cname) {
  useEffect(() => {
    console.log(cname + '组件被创建～');
    return () => {
      console.log(cname + '组件被销毁！');
    };
  });
}
const Home = memo(() => {
  useLoginLifeTime('Home');
  return (
    <div>
      <h3>Home</h3>
    </div>
  );
});
const About = memo(() => {
  useLoginLifeTime('About');
  return (
    <div>
      <h3>About</h3>
    </div>
  );
});
const App = memo(() => {
  const [isShow, setIsShow] = useState(true);
  useLoginLifeTime('App');
  return (
    <div>
      <h1>自定义Hook</h1>
      <h2>App</h2>
      <button onClick={(e) => setIsShow(!isShow)}>组件显示/隐藏</button>
      {isShow && <Home />}
      {isShow && <About />}
    </div>
  );
});

• 需求：Context的共享

// index.js入口文件
import { UserContext, TokenContext } from './12_自定义hook/context';
root.render(
  <UserContext.Provider value={{ name: 'coderwhy', level: 99 }}>
    <TokenContext.Provider value={'tokenvalue@#$$hjfjashja'}>
      <App />
    </TokenContext.Provider>
  </UserContext.Provider>,
);

// context
import { createContext } from 'react';

const UserContext = createContext();
const TokenContext = createContext();

export { UserContext, TokenContext };

// 抽取hook
import { useContext } from 'react';
import { TokenContext, UserContext } from '../context';

function useUserToken() {
  const user = useContext(UserContext);
  const token = useContext(TokenContext);
  return [user, token];
}

export default useUserToken;

import React, { memo } from 'react';
import { useUserToken } from './hooks';

const Home = memo(() => {
  const [user, token] = useUserToken();
  return (
    <div>
      <h3>Home</h3>
      <h4>
        name:{user.name}
        <br />
        level:{user.level}
      </h4>
      <h4>{token}</h4>
    </div>
  );
});
const About = memo(() => {
  const [user, token] = useUserToken();
  return (
    <div>
      <h3>About</h3>
      <h4>
        name:{user.name}
        <br />
        level:{user.level}
      </h4>
      <h4>{token}</h4>
    </div>
  );
});
const App = memo(() => {
  return (
    <div>
      <h1>自定义Hook</h1>
      <h2>App</h2>

      <Home />
      <About />
    </div>
  );
});

export default App;

• 需求：获取滚动位置

  import React, { memo, useEffect } from 'react';
  import { useScrollPosition } from './hooks';
  import './style.css';
  const Home = memo(() => {
    useEffect(() => {
      function handleScroll() {
        console.log(window.scrollX, window.scrollY);
      }
      window.addEventListener('scroll', handleScroll);
      return () => {
        window.removeEventListener('scroll', handleScroll);
      };
    }, []);
    return (
      <div>
        <h3>Home</h3>
      </div>
    );
  });
  const About = memo(() => {
    const [scrollX, scrollY] = useScrollPosition();
    return (
      <div>
        <h3>About</h3>
        <h4>scrollX:{scrollX}</h4>
        <h4>scrollY:{scrollY}</h4>
      </div>
    );
  });
  const App = memo(() => {
    return (
      <div className="app">
        <h1>自定义Hook</h1>
        <h2>App</h2>
  
        <Home />
        <About />
      </div>
    );
  });
  
  export default App;
  
  

  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.scrollY);
        setScrollX(window.scrollX);
        setScrollY(window.scrollY);
      }
      window.addEventListener('scroll', handleScroll);
      return () => {
        window.removeEventListener('scroll', handleScroll);
      };
    }, []);
  
    return [scrollX, scrollY];
  }
  
  export default useScrollPosition;
  

• 需求：localStorage数据存储

import { useEffect, useState } from 'react';

function useLocalStorage(key) {
  // 1.从localstorage中获取数据，并且根据数据创建组件的state
  const [data, setData] = useState(() => {
    const item = localStorage.getItem(key);
    if (!item) return '';
    return JSON.parse(item);
  });
  // 2.监听data改变，一旦发生改变就存储data最新值
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(data));
  }, [data]);
  //   3. 将data, setData 返回
  return [data, setData];
}

export default useLocalStorage;

Redux hooks

• npm i @reduxjs/toolkit react-redux

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

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

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

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

• 口 参数一：将state映射到需要的数据中；

• 口 参数二：可以进行比较来决定是否组件重新渲染；

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

• 口 如何比较呢？const refEquality = (a, b) => a === b；

• 口 也就是我们必须返回两个完全相等的对象才可以不引起重新渲染：

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

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

import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { addNumberAction, changeMsgAction, subNumberAction } from './store/features/counter';

const Home = memo((props) => {
  const { message } = useSelector(
    (state) => ({
      message: state.counter.message,
    }),
    shallowEqual,
  );
  const dispatch = useDispatch();
  function changeMsgHandle() {
    dispatch(changeMsgAction('你好！'));
  }
  console.log('home render');
  return (
    <div>
      <h2>Home : message : {message}</h2>
      <button onClick={(e) => changeMsgHandle()}>change message</button>
    </div>
  );
});

const App = memo((props) => {
  // 1. 使用useSelector将redux/store中的数据映射到组件内
  const { count } = useSelector(
    (state) => ({
      count: state.counter.count,
    }),
    shallowEqual,
  );
  // 2.使用useDispatch直接派发action
  const dispatch = useDispatch();
  function addNumberHandle(num, isAdd = true) {
    if (isAdd) {
      dispatch(addNumberAction(num));
    } else {
      dispatch(subNumberAction(num));
    }
  }
  console.log('app render');
  return (
    <div>
      <h1>App:</h1>
      <h2>count:{count}</h2>
      <button onClick={(e) => addNumberHandle(1)}>+1</button>
      <button onClick={(e) => addNumberHandle(3)}>+3</button>
      <button onClick={(e) => addNumberHandle(5)}>+5</button>
      <button onClick={(e) => addNumberHandle(2, false)}>-2</button>
      <Home />
    </div>
  );
});

//./store/features/counter.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'count',
  initialState: {
    count: 99,
    message: 'hello world',
  },
  reducers: {
    addNumberAction(state, { payload }) {
      state.count = state.count + payload;
    },
    subNumberAction(state, { payload }) {
      state.count = state.count - payload;
    },
    changeMsgAction(state, { payload }) {
      state.message = payload;
    },
  },
});

export const { addNumberAction, subNumberAction, changeMsgAction } = counterSlice.actions;
export default counterSlice.reducer;

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

//index.js
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(
  <Provider store={store}>
    <App />
  </Provider>,
);

useId

useId https://zh-hans.react.dev/reference/react/useId

• 官方的解释：useld 是一个用于生成横跨服务端和客户端的稳定的唯一ID ；同时避免 hydration 不匹配的 hook。
• 这里有一个词叫 hydration，要想理解这个词，我们需要理解一些服务器端渲染（SSR）的概念。
• 什么是SSR ?
  • 口 SSR (Server Side Rendering，服务端渲染），指的是页面在服务器端已经生成了完成的HTML页面结构，不需要浏览器通过执行JS，创建页面结构；
  • 口 对应的是CSR (Client Side Rendering，客户端渲染）我们开发的SPA页面通常依赖的就是客户端渲染；
• 早期的服务端渲染包括PHP、JSP、ASP等方式，但是在目前前后端分离的开发模式下，前端开发人员不太可能再去学习PHP、 JSP等技术来开发网页；
• 不过我们可以借助于Node来帮助我们执行JavaScript代码，提前完成页面的结构；

SPA页面的缺陷

• 首屏的渲染速度；
• 不利于SEO优化；

SSR同构应用

• 什么是同构？
  • 口 一套代码既可以在服务端运行又可以在客户端运行，这就是同构应用。
• 同构是一种SSR的形态，是现代SSR的一种表现形式。
• 口 当用户发出请求时，先在服务器通过SSR渲染出首页的内容。
• 口 但是对应的代码同样可以在客户端被执行。
• 口 执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染；

Hydration

• 什么是Hydration？

• 这里我引入vite-plugin-ssr插件的官方解释。

  What is Hydration?

  When doing SSR our pages are rendered to HTML. But HTML alone isn’t sufficient to make a page interactive. For example, a page with zero browser-side JavaScript cannot be interactive (there are no JavaScript event handlers to react to user actions such as a click on a button).

  To make our page interactive, in addition to render our page to HTML in Node.js, our UI framework (Vue/React/…) also loads and renders the page in the browser. (It creates an internal representation of the page, and then maps the internal representation to the DOM elements of the HTML we rendered in Node.js.)

  This process is called hydration. Informally speaking: it makes our page interactive/alive/hydrated.

  https://vite-plugin-ssr.com/hydration

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

  • 口 但仅 HTML 不足以使页面具有交互性，例如，浏览器端 JavaScript 为零的页面不能是交互式的（没有 JavaScript 事件处理程序来响应用户操作，例如单击按钮）;

  • 口 为了使我们的页面具有交互性，除了在Nodejs 中将页面呈现为 HTML 之外，我们的UI框架(Vue/React/…）还在浏览器中加载和呈现页面。（它创建页面的内部表示，然后将内部表示映射到我们在 Nodejs 中呈现的 HTML的 DOM元素）

• 这个过程称为hydration。

useId的作用

• 我们再来看一遍：useld 是一个用于生成横跨服务端和客户端的稳定的唯一ID 的同时避免 hydration 不匹配的 hook。
• 所以我们可以得出如下结论：
  • 口 useld是用于react的同构应用开发的，前端的SPA页面并不需要使用它；
  • 口 useld可以保证应用程序在客户端和服务器端生成唯一的ID，这样可以有效的避免通过一些手段生成的id不一致，造成 hydration mismatch;

useTransition

useTransitionhttps://zh-hans.react.dev/reference/react/useTransition

• 官方解释：返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。
  • 口 事实上官方的说法，还是让人云里雾里，不知所云。
• useTransition到底是干嘛的呢？
• 它其实在告诉react对于某部分任务的更新优先级较低，可以稍后进行更新。

npm install --save-dev @faker-js/faker
// 使用fakerjs伪造数据

import { faker } from '@faker-js/faker';
const namesArray = [...Array(10000).keys()].map((item) => faker.person.firstName());

export default namesArray;

import React, { memo, useState, useTransition } from 'react';
import namesArray from './namsArray';

const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray);

  const [pending, setStartTransition] = useTransition();

  function inputValueChangeHandle(event) {
    setStartTransition(() => {
      const keyword = event.target.value;
      const filterShowNames = namesArray.filter((item) => item.includes(keyword));
      setShowNames(filterShowNames);
    });
  }
  return (
    <div>
      <h1>App</h1>
      <input type="text" onInput={inputValueChangeHandle} />
      <h2>用户名列表 {pending && <span>data loading....</span>} </h2>
      <ul>
        {showNames.map((item, index) => (
          <li key={index}>
            {index}:{item}
          </li>
        ))}
      </ul>
    </div>
  );
});

export default App;

useDeferredValue

useDeferredValue https://zh-hans.react.dev/reference/react/useDeferredValue

• 官方解释：useDeferredValue 接受一个值，并返回该值的新副本，该副本将推迟到更紧急地更新之后。
• 在明白了useTransition之后，我们就会发现use DeferredValue的作用是一样的效果，可以让我们的更新延迟。

const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray);

  const deferredShowNames = useDeferredValue(showNames);

  function inputValueChangeHandle(event) {
    const keyword = event.target.value;
    const filterShowNames = namesArray.filter((item) => item.includes(keyword));
    setShowNames(filterShowNames);
  }
  return (
    <div>
      <h1>App</h1>
      <input type="text" onInput={inputValueChangeHandle} />
      <h2>用户名列表 </h2>
      <ul>
        {deferredShowNames.map((item, index) => (
          <li key={index}>
            {index}:{item}
          </li>
        ))}
      </ul>
    </div>
  );
});