react에는 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect 등 총 9개의 후크가 있습니다.

반응에는 여러 가지 후크가 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React Hooks (총 9개)

React의 세계에는 컨테이너 컴포넌트와 UI 컴포넌트가 있습니다. React Hooks가 등장하기 전에는 UI 컴포넌트의 경우 함수와 Stateless 컴포넌트를 사용하여 UI를 표시할 수 있었고, 컨테이너의 경우 컴포넌트를 사용할 수 있었습니다. 그리고 함수 구성요소는 무력합니다. 우리는 데이터를 얻고, 데이터를 처리하고, 렌더링을 위해 매개변수를 UI 구성요소에 전달하기 위해 클래스 구성요소에 의존합니다. 제 생각에는 React Hooks를 사용하면 이전 클래스 구성 요소에 비해 다음과 같은 이점이 있습니다.

코드가 더 읽기 쉽고, 동일한 함수의 코드 로직이 다른 수명 주기 함수로 분할되어 개발자가 쉽게 작업할 수 있습니다. React Hooks를 통해 기능 코드를 집계하여 읽기 및 유지 관리를 용이하게 할 수 있습니다.
컴포넌트 트리 수준이 더 얕아집니다. 원래 코드에서는 반복하기 위해 HOC/render props 및 기타 방법을 자주 사용합니다. 상태, 향상된 기능 등은 의심할 여지 없이 컴포넌트 트리 레이어 수와 렌더링을 증가시킬 것입니다. React Hooks에서는 이러한 기능을 강력한 맞춤형 Hooks

React v16.8에서 구현할 수 있습니다. 커뮤니티에는 아직 React Hooks를 기반으로 복잡한 애플리케이션을 구축하는 방법에 대한 모범 사례가 없지만(적어도 아직은 없었습니다), 이 측면에 대해 커뮤니티에서 많은 기사를 읽은 것에 의존하여 10개를 사용하겠습니다. React Hooks의 대부분의 기능을 이해하고 능숙하게 사용할 수 있도록 도와줍니다.

1. useState는 구성 요소 상태를 저장합니다.

클래스 구성 요소에서는 this.state를 사용하여 구성 요소 상태를 저장하고 구성 요소 다시 렌더링을 트리거하도록 수정합니다. 예를 들어, 다음의 간단한 카운터 컴포넌트는 클래스 컴포넌트가 어떻게 작동하는지에 대한 좋은 설명입니다:

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "alife"
    };
  }
  render() {
    const { count } = this.state;
    return (
      <p>
        Count: {count}
        <button onClick={() => this.setState({ count: count + 1 })}>+</button>
        <button onClick={() => this.setState({ count: count - 1 })}>-</button>
      </p>
    );
  }
}

로그인 후 복사

간단한 카운터 컴포넌트가 완성되었으며, 함수 컴포넌트에서는 이런 흑마술이 없기 때문에 React는 useState를 사용하여 구성 요소.

import React, { useState } from "react";
function App() {
  const [obj, setObject] = useState({
    count: 0,
    name: "alife"
  });
  return (
    <p className="App">
      Count: {obj.count}
      <button onClick={() => setObject({ ...obj, count: obj.count + 1 })}>+</button>
      <button onClick={() => setObject({ ...obj, count: obj.count - 1 })}>-</button>
    </p>
  );
}

로그인 후 복사

useState 매개변수를 전달하여 기본 상태 및 변경 상태 함수를 사용하여 배열을 반환합니다. 새 상태를 함수에 전달하여 원래 상태 값을 변경합니다. useState가 상태를 처리하는 데 도움이 되지 않는다는 점은 주목할 가치가 있습니다. setState의 덮어쓰지 않는 상태 업데이트와 비교할 때, useState의 덮어쓰기 상태 업데이트는 개발자가 로직을 직접 처리해야 합니다. (코드는 위와 같습니다)

useState를 사용하고 나면 함수 컴포넌트도 자체 상태를 가질 수 있을 것 같지만 이것만으로는 부족합니다.

2. UseEffect는 부작용을 처리합니다

Function 구성 요소는 상태를 저장할 수 있지만 비동기 요청의 경우 부작용 작업은 여전히 무력하므로 React는 개발자가 함수 구성 요소의 부작용을 처리하는 데 도움을 주기 위해 useEffect를 제공합니다. 먼저 클래스 구성 요소가 어떻게 수행되는지 살펴보세요.

import React, { Component } from "react";
class App extends Component {
  state = {
    count: 1
  };
  componentDidMount() {
    const { count } = this.state;
    document.title = "componentDidMount" + count;
    this.timer = setInterval(() => {
      this.setState(({ count }) => ({
        count: count + 1
      }));
    }, 1000);
  }
  componentDidUpdate() {
    const { count } = this.state;
    document.title = "componentDidMount" + count;
  }
  componentWillUnmount() {
    document.title = "componentWillUnmount";
    clearInterval(this.timer);
  }
  render() {
    const { count } = this.state;
    return (
      <p>
        Count:{count}
        <button onClick={() => clearInterval(this.timer)}>clear</button>
      </p>
    );
  }
}

로그인 후 복사

예제에서 구성 요소는 매초마다 구성 요소 상태를 업데이트하고 업데이트가 트리거될 때마다 document.title 업데이트를 트리거합니다(부작용). (클리어링과 유사)

예제에서 볼 수 있듯이 일부 반복적인 함수 개발자는 컴포넌트DidMount와 componentDidUpdate에 반복적으로 작성해야 하지만 useEffect를 사용하면 완전히 다릅니다.

import React, { useState, useEffect } from "react";
let timer = null;
function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = "componentDidMount" + count;
  },[count]);

  useEffect(() => {
    timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    // 一定注意下这个顺序：
    // 告诉react在下次重新渲染组件之后，同时是下次执行上面setInterval之前调用
    return () => {
      document.title = "componentWillUnmount";
      clearInterval(timer);
    };
  }, []);
  return (
    <p>
      Count: {count}
      <button onClick={() => clearInterval(timer)}>clear</button>
    </p>
  );
}

로그인 후 복사

useEffect를 사용하여 위의 예를 다시 작성했습니다. useEffect의 첫 번째 매개변수는 비동기 요청, 외부 매개변수 수정 및 기타 동작과 같은 일부 부작용을 수행하는 데 사용할 수 있는 함수를 수신합니다. 배열. 배열의 값이 변경되면 useEffect의 첫 번째 매개변수에 있는 함수가 트리거되어 실행됩니다. 반환 값(있는 경우)은 구성 요소가 소멸되거나 함수가 호출되기 전에 호출됩니다 .

1. 이 강력한 Hook을 기반으로 우리는 componentDidUpdate와 같은 다른 수명주기 기능을 시뮬레이션하고 캡슐화할 수 있습니다. 코드는 매우 간단합니다.
이제 우리는 상태를 관리하는 useState, 부작용과 비동기 로직을 처리하는 useEffect를 가지고 있습니다. . 이 두 가지 트릭을 배우는 것만으로도 일부 클래스 구성 요소의 대규모 상황을 처리하는 데 충분합니다.

3、useContext 减少组件层级

上面介绍了 useState、useEffect 这两个最基本的 API，接下来介绍的 useContext 是 React 帮你封装好的，用来处理多层级传递数据的方式，在以前组件树种，跨层级祖先组件想要给孙子组件传递数据的时候，除了一层层 props 往下透传之外，我们还可以使用 React Context API 来帮我们做这件事，举个简单的例子：

const { Provider, Consumer } = React.createContext(null);
function Bar() {
  return <Consumer>{color => <p>{color}</p>}</Consumer>;
}
function Foo() {
  return <Bar />;
}
function App() {
  return (
    <Provider value={"grey"}>
      <Foo />
    </Provider>
  );
}

로그인 후 복사

通过 React createContext 的语法，在 APP 组件中可以跨过 Foo 组件给 Bar 传递数据。而在 React Hooks 中，我们可以使用 useContext 进行改造。

const colorContext = React.createContext("gray");
function Bar() {
  const color = useContext(colorContext);
  return <p>{color}</p>;
}
function Foo() {
  return <Bar />;
}
function App() {
  return (
    <colorContext.Provider value={"red"}>
      <Foo />
    </colorContext.Provider>
  );
}

로그인 후 복사

传递给 useContext 的是 context 而不是 consumer，返回值即是想要透传的数据了。用法很简单，使用 useContext 可以解决 Consumer 多状态嵌套的问题。

function HeaderBar() {
  return (
    <CurrentUser.Consumer>
      {user =>
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
      }
    </CurrentUser.Consumer>
  );
}

로그인 후 복사

而使用 useContext 则变得十分简洁，可读性更强且不会增加组件树深度。

function HeaderBar() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);
  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}

로그인 후 복사

4、useReducer

useReducer 这个 Hooks 在使用上几乎跟 Redux/React-Redux 一模一样，唯一缺少的就是无法使用 redux 提供的中间件。我们将上述的计时器组件改写为 useReducer，

import React, { useReducer } from "react";
const initialState = {
  count: 0
};
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - action.payload };
    default:
      throw new Error();
  }
}
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
      <button onClick={() => dispatch({ type: "decrement", payload: 5 })}>
        -
      </button>
    </>
  );
}

로그인 후 복사

用法跟 Redux 基本上是一致的，用法也很简单，算是提供一个 mini 的 Redux 版本。

5、useCallback 记忆函数

在类组件中，我们经常犯下面这样的错误：

class App {
    render() {
        return <p>
            <SomeComponent style={{ fontSize: 14 }} doSomething={ () => { console.log(&#39;do something&#39;); }}  />
        </p>;
    }
}

로그인 후 복사

这样写有什么坏处呢？一旦 App 组件的 props 或者状态改变了就会触发重渲染，即使跟 SomeComponent 组件不相关，由于每次 render 都会产生新的 style 和 doSomething（因为重新render前后， style 和 doSomething分别指向了不同的引用），所以会导致 SomeComponent 重新渲染，倘若 SomeComponent 是一个大型的组件树，这样的 Virtual Dom 的比较显然是很浪费的，解决的办法也很简单，将参数抽离成变量。

const fontSizeStyle = { fontSize: 14 };
class App {
    doSomething = () => {
        console.log(&#39;do something&#39;);
    }
    render() {
        return <p>
            <SomeComponent style={fontSizeStyle} doSomething={ this.doSomething }  />
        </p>;
    }
}

로그인 후 복사

在类组件中，我们还可以通过 this 这个对象来存储函数，而在函数组件中没办法进行挂载了。所以函数组件在每次渲染的时候如果有传递函数的话都会重渲染子组件。

function App() {
  const handleClick = () => {
    console.log(&#39;Click happened&#39;);
  }
  return <SomeComponent onClick={handleClick}>Click Me</SomeComponent>;
}

로그인 후 복사

这里多说一句，一版把函数式组件理解为class组件render函数的语法糖，所以每次重新渲染的时候，函数式组件内部所有的代码都会重新执行一遍。所以上述代码中每次render，handleClick都会是一个新的引用，所以也就是说传递给SomeComponent组件的props.onClick一直在变(因为每次都是一个新的引用)，所以才会说这种情况下，函数组件在每次渲染的时候如果有传递函数的话都会重渲染子组件。

而有了 useCallback 就不一样了，你可以通过 useCallback 获得一个记忆后的函数。

function App() {
  const memoizedHandleClick = useCallback(() => {
    console.log(&#39;Click happened&#39;)
  }, []); // 空数组代表无论什么情况下该函数都不会发生改变
  return <SomeComponent onClick={memoizedHandleClick}>Click Me</SomeComponent>;
}

로그인 후 복사

老规矩，第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCallback 就会重新返回一个新的记忆函数提供给后面进行渲染。

这样只要子组件继承了 PureComponent 或者使用 React.memo 就可以有效避免不必要的 VDOM 渲染。

6、useMemo 记忆组件

useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。

useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs).

로그인 후 복사

所以前面使用 useCallback 的例子可以使用 useMemo 进行改写：

function App() {
  const memoizedHandleClick = useMemo(() => () => {
    console.log(&#39;Click happened&#39;)
  }, []); // 空数组代表无论什么情况下该函数都不会发生改变
  return <SomeComponent onClick={memoizedHandleClick}>Click Me</SomeComponent>;
}

로그인 후 복사

唯一的区别是：**useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你。**所以在前面的例子中，可以返回 handleClick 来达到存储函数的目的。

所以 useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数计算得到一个确定的值，比如记忆组件。

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

로그인 후 복사

当 a/b 改变时，child1/child2 才会重新渲染。从例子可以看出来，只有在第二个参数数组的值发生变化时，才会触发子组件的更新。

7、useRef 保存引用值

useRef 跟 createRef 类似，都可以用来生成对 DOM 对象的引用，看个简单的例子：

import React, { useState, useRef } from "react";
function App() {
  let [name, setName] = useState("Nate");
  let nameRef = useRef();
  const submitButton = () => {
    setName(nameRef.current.value);
  };
  return (
    <p className="App">
      <p>{name}</p>

      <p>
        <input ref={nameRef} type="text" />
        <button type="button" onClick={submitButton}>
          Submit
        </button>
      </p>
    </p>
  );
}

로그인 후 복사

useRef 返回的值传递给组件或者 DOM 的 ref 属性，就可以通过 ref.current 值访问组件或真实的 DOM 节点，重点是组件也是可以访问到的，从而可以对 DOM 进行一些操作，比如监听事件等等。

当然 useRef 远比你想象中的功能更加强大，useRef 的功能有点像类属性，或者说您想要在组件中记录一些值，并且这些值在稍后可以更改。

利用 useRef 就可以绕过 Capture Value 的特性。可以认为 ref 在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。

React Hooks 中存在 Capture Value 的特性：

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

  useEffect(() => {
    setTimeout(() => {
      alert("count: " + count);
    }, 3000);
  }, [count]);

  return (
    <p>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <button onClick={() => setCount(count - 1)}>减少 count</button>
    </p>
  );
}

로그인 후 복사

先点击增加button，后点击减少button，3秒后先alert 1，后alert 0，而不是alert两次0。这就是所谓的 capture value 的特性。而在类组件中 3 秒后输出的就是修改后的值，因为这时候** message 是挂载在 this 变量上，它保留的是一个引用值**，对 this 属性的访问都会获取到最新的值。讲到这里你应该就明白了，useRef 创建一个引用，就可以有效规避 React Hooks 中 Capture Value 特性。

function App() {
  const count = useRef(0);

  const showCount = () => {
    alert("count: " + count.current);
  };

  const handleClick = number => {
    count.current = count.current + number;
    setTimeout(showCount, 3000);
  };

  return (
    <p>
      <p>You clicked {count.current} times</p>
      <button onClick={() => handleClick(1)}>增加 count</button>
      <button onClick={() => handleClick(-1)}>减少 count</button>
    </p>
  );
}

로그인 후 복사

只要将赋值与取值的对象变成 useRef，而不是 useState，就可以躲过 capture value 特性，在 3 秒后得到最新的值。

8、useImperativeHandle 透传 Ref

通过 useImperativeHandle 用于让父组件获取子组件内的索引

import React, { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
function ChildInputComponent(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => inputRef.current);
  return <input type="text" name="child input" ref={inputRef} />;
}
const ChildInput = forwardRef(ChildInputComponent);
function App() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return (
    <p>
      <ChildInput ref={inputRef} />
    </p>
  );
}

로그인 후 복사

通过这种方式，App 组件可以获得子组件的 input 的 DOM 节点。

9、useLayoutEffect 同步执行副作用

大部分情况下，使用 useEffect 就可以帮我们处理组件的副作用，但是如果想要同步调用一些副作用，比如对 DOM 的操作，就需要使用 useLayoutEffect，useLayoutEffect 中的副作用会在 DOM 更新之后同步执行。

function App() {
  const [width, setWidth] = useState(0);
  useLayoutEffect(() => {
    const title = document.querySelector("#title");
    const titleWidth = title.getBoundingClientRect().width;
    console.log("useLayoutEffect");
    if (width !== titleWidth) {
      setWidth(titleWidth);
    }
  });
  useEffect(() => {
    console.log("useEffect");
  });
  return (
    <p>
      <h1 id="title">hello</h1>
      <h2>{width}</h2>
    </p>
  );
}

로그인 후 복사

在上面的例子中，useLayoutEffect 会在 render，DOM 更新之后同步触发函数，会优于 useEffect 异步触发函数。