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组件对比

计数器案例

javascript">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;

javascript">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实现：

javascript">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;

javascript">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中：

javascript">// 负责告知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；

javascript">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 的值；

javascript">// 以前
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;

javascript">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>
  );
});

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

useReducer

useReducerhttps://zh-hans.react.dev/reference/react/useReducer

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

javascript">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

javascript">// 闭包陷阱
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（记忆的）值；
- 口在**依赖不变的情况下，多次定义的时候，返回的值是相同的**；
```
javascript">  const memoizedCallback = useCallback(() => {
    console.log('memoizedCallback');
    doSomething(a,b)
  }, [a,b]);
```
案例
口案例一：使用useCallback和不使用useCallback定义一个的数是否会带来性能的优化：

口案例二：使用useCallback和不使用useCallback定义一个函数传递给子组件是否会带来性能的优化：
在这里插入图片描述

javascript">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（记忆的）值;
口在依赖不变的情况下，多次定义的时候，返回的值是相同的；

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

案例：

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

javascript">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组件)元素；

javascript">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>
  );
});

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

javascript">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函数；

javascript">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。

javascript">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的特性。
需求：所有的组件在创建和销毁时都进行打印
- 口组件被创建：打印组件被创建了；
- 口组件被销毀：打印组件被销段了；

javascript">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的共享

javascript">// 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>,
);

javascript">// context
import { createContext } from 'react';

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

export { UserContext, TokenContext };

javascript">// 抽取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;

javascript">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;

需求：获取滚动位置

javascript">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;

javascript">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数据存储

javascript">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对象；

javascript">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>
  );
});

javascript">//./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;

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

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

export default store;

javascript">//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优化；