React-hooks面试考察知识点汇总

Hook 简介

Hook出世之前React存在的问题

1. 在组件之间复用状态逻辑很难

   React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。

2. 复杂组件变得难以理解

   组件常常在 componentDidMount 和 componentDidUpdate中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。

3. 难以理解的 class

   class 是学习 React 的一大屏障。你必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。大家可以很好地理解 props，state 和自顶向下的数据流，但对 class 却一筹莫展。

Hook带来的解决方案

1. 你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。
2. Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
3. Hook 使你在非 class 的情况下可以使用更多的 React 特性。 从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。

Hook API

useState

useState 是react自带的一个hook函数，它的作用就是用来声明状态变量。useState这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前当前的状态值，第[1]项是可以改变状态值的方法函数。

初始化

//返回一个 state，以及更新 state 的函数 setState(接收一个新的 state 值并将组件的一次重新渲染加入队列)
const [state, setState] = useState(initialState);
1
2

函数式更新

//如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。
function Counter({
    initialCount}) {
   
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {
   count}      <button onClick={
   () => setCount(initialCount)}>Reset</button>
      <button onClick={
   () => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={
   () => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

惰性初始 state

//如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
const [state, setState] = useState(() => {
   
  const initialState = someExpensiveComputation(props);
  return initialState;
});
1
2
3
4
5
6

跳过 state 更新

调用 State Hook 的更新函数并传入当前的 state 时，React 将跳过子组件的渲染及 effect 的执行。（React 使用 Object.is 比较算法 来比较 state。）

useEffect

我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如componentDidMount，componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三。参考 前端react面试题详细解答

简单例子

import {
    useState, useEffect } from 'react';

function Example() {
   
  const [count, setCount] = useState(0);

  // 类似于componentDidMount 和 componentDidUpdate:
  useEffect(() => {
   
    // 更新文档的标题
    document.title = `You clicked ${
     count} times`;
  });

  return (
    <div>
      <p>You clicked {
   count} times</p>
      <button onClick={
   () => setCount(count + 1)}>        Click me      </button>
    <
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21