[JavaScript知识库]回顾React—hooks

React 是实现了组件的前端框架，它支持 class 和 function 两种形式的组件。

class 组件是通过继承模版类（Component、PureComponent）的方式，继承是 class 本身的特性，它支持设置 state，当?state 改变后重新渲染，可以重写一些父类的方法，会在 React 组件渲染的不同阶段调用，俗称生命周期函数。

function 组件不能做继承，因为 function 本来就没这个特性，所以是提供了不同API?让function函数去使用，API会在内部的一个数据结构上挂载一些函数和值，并执行相应的逻辑，通过这种方式类似 class 组件的生命周期函数的功能，俗称hooks

Hooks 初识

Hook?是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

目前官方提供的钩子共分为两种，分为基本钩子以及拓展钩子

基本钩子共有：useState 、useEffect 、 useContext

额外的钩子有：useCallback 、 useReducer 、 useMemo 、 useRef 、 useLayoutEffect 、 useImperativeHandle 、 useDebugValue。

useState

该钩子用于创建一个新的状态，参数为一个固定的值或者一个有返回值的方法。钩子执行后的结果为一个数组，分别为生成的状态以及改变该状态的方法，通过解构赋值的方法拿到对应的值与方法。

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

  return (
    <div>
      {count}
      <button onClick={() => { setCount(Math.ceil(Math.random() * 1000))}}>
        使用useState改变count
      </button>
    </div>

  );
}

声明多个 state 变量

也可以在一个组件中多次使用比如

function appUseState() {
  // 声明多个 state 变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

数组解构的语法让我们在调用?useState?时可以给 state 变量取不同的名字

useEffect

useEffect?就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的?componentDidMount、componentDidUpdate?和?componentWillUnmount?具有相同的用途，只不过被合并成了一个 API。

主要用于以下两种情况：

1. 函数式组件中不存在传统类组件生命周期的概念，如果我们需要在一些特定的生命周期或者值变化后做一些操作的话，必须借助 useEffect 的一些特性去实现。
2. useState 产生的 setCount 方法并没有提供类似于 setState 的第二个参数一样的功能，因此如果需要在 State 改变后执行一些方法，必须通过 useEffect 实现。

该钩子接受两个参数，第一个参数为副作用需要执行的回调，生成的回调方法可以返回一个函数（将在组件卸载时运行）；第二个为该副作用监听的状态数组，当对应状态发生变动时会执行副作用，如果第二个参数为空，那么在每一个 State 变化时都会执行该副作用。

第一种情况：

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

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

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

   return (
    <div>
      {count}
      <button onClick={() => { setCount(Math.ceil(Math.random() * 1000))}}>
        使用useState改变count
      </button>
    </div>
}

第二种情况：

import React, { useState, useEffect } from 'react';
import { message } from 'antd';

function Child({ visible }) {
  useEffect(() => {
    message.info('页面挂载时打印');
    return () => {
      message.info('页面卸载时打印');
    };
  }, []);

  return count ? 'true' : 'false';
}

export default function HookDemo() {

const [count, setCount] = useState(true);


  return (
    <div>
      {
        count && <Child count={count} />
      }
      <button onClick={() => { setCount(!visible); }}>
      使用useState改变count
      </button>
    </div>
  );
}

useCallback

生成 Callback 的钩子。用于对不同?useEffect?中存在的相同逻辑的封装，减少代码冗余，配合?useEffect?使用。

import React, { useState, useEffect，useCallback } from 'react';
import { message } from 'antd';

const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(10);


const calculateCount = useCallback(() => {
  if (count1 && count2) {
    return count1 * count2;
  }
  return count1 + count2;
}, [count1, count2])

useEffect(() => {
    const result = calculateCount(count, count2);
    message.info(`执行副作用，最新值为${result}`);
}, [calculateCount])

在上面的例子中我们通过?useCallback?的使用生成了一个回调，useCallback?的使用方法和?useEffect?一致，第一个参数为生成的回调方法，第二个参数为该方法关联的状态，任一状态发生变动都会重新生成新的回调。

useRef

useRef?接受一个参数，为 ref 的初始值。类似于类组件中的?createRef?方法 ，该钩子会返回一个对象，对象中的 current 字段为我们?指向的实例?/?保存的变量，可以实现获得目标节点实例或保存状态的功能。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

?ref 这一种访问 DOM?的主要方式。然而，useRef()?比?ref?属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。当 ref 对象内容发生变化时，useRef?并不会通知你。变更?属性不会引发组件重新渲染。想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref?来实现。

useMemo

Memo 为 Memory 简写，useMemo 即使用记忆的内容。该钩子主要用于做性能的优化。

import React, { useState, useMemo } from 'react';
import { message } from 'antd';

export default function HookDemo() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(10);

  const calculateCount = useMemo(() => {
    message.info('重新生成计算结果');
    return count1 * 10;
  }, [count1]);
  return (
    <div>
      {calculateCount}
      <button onClick={() => { setCount1(count1 + 1); }}>使用useMemo改变count1</button>
      <button onClick={() => { setCount2(count2 + 1); }}>使用useMemo改变count2</button>
    </div>
  );
}