반응 후크란 무엇입니까?-JS 튜토리얼-php.cn

React 후크는 React16.8의 새로운 기능으로, React 함수 구성 요소가 상태를 갖고 componentDidMount 및 componentDidUpdate와 같은 수명 주기 메서드를 제공할 수 있게 해줍니다.

반응 후크란 무엇입니까?

대부분의 React 클래스 구성 요소는 상태를 저장할 수 있지만 함수 구성 요소는 그렇지 않습니다. 그리고 클래스 구성요소에는 수명주기가 있지만 함수 구성요소에는 그렇지 않습니까?

React의 초기 버전에서는 클래스 컴포넌트가 PureComponent를 상속하여 일부 불필요한 렌더링을 최적화할 수 있습니다. React 공식 웹사이트에서는 일부 불필요한 렌더링을 줄이기 위해 함수 컴포넌트를 캐시하는 해당 방법을 제공하지 않습니다. . 메모 기능.

React 16.8의 새로운 Hooks는 React 함수 구성 요소에 상태를 부여하고 componentDidMount 및 componentDidUpdate와 같은 수명 주기 메서드를 제공할 수 있습니다.

Hook "훅"이라는 뜻의 단어입니다.

React Hooks는 구성 요소가 가능한 한 순수한 함수로 작성되어야 함을 의미합니다. 외부 기능과 부작용이 필요한 경우 외부 코드를 "연결"하는 데 후크를 사용해야 합니다. React Hooks는 그러한 후크입니다.

필요한 후크를 사용하세요. React는 기본적으로 몇 가지 일반적인 후크를 제공하며, 자체 후크를 캡슐화할 수도 있습니다.

모든 후크는 함수에 외부 함수를 도입하므로 React는 쉽게 식별할 수 있도록 후크 이름에 use 접두사를 사용하는 데 동의합니다. xxx 기능을 사용하려는 경우 후크 이름은 usexxx입니다.

다음은 React에서 기본으로 제공하는 가장 일반적으로 사용되는 4가지 Hook를 소개합니다.

useState()
useContext()
useReducer()
useEffect()

useState(): 상태 후크

useState()는 다음 용도로 사용됩니다. 함수 구성요소는 상태를 소개합니다. 순수 함수는 상태를 가질 수 없으므로 상태를 후크에 넣습니다.

이 문서 앞부분의 구성 요소 클래스에서는 사용자가 버튼을 클릭하면 버튼의 텍스트가 변경됩니다. 이는 사용자가 클릭하는지 여부에 따라 달라집니다. useState()를 사용하여 다음과 같이 다시 작성합니다.

import React, { useState } from "react";
export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");
  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }
  return  <button  onClick={handleClick}>{buttonText}</button>;
}

로그인 후 복사

데모 주소: https://codesandbox.io/s/nifty-waterfall-4i2dq

위 코드에서 Button 구성 요소는 함수이고 useState() 후크는 내부적으로 상태를 도입하는 데 사용됩니다.

useState() 이 함수는 상태의 초기값을 매개변수로 받아들입니다. 위 예에서 초기값은 버튼의 텍스트입니다. 이 함수는 배열을 반환합니다. 배열의 첫 번째 멤버는 상태의 현재 값을 가리키는 변수(위 예에서는buttonText)입니다. 두 번째 멤버는 상태를 업데이트하는 데 사용되는 함수입니다. 규칙은 설정 접두어에 상태의 변수 이름을 더한 것입니다(위의 예는 setButtonText입니다).

useContext(): 공유 상태 후크

구성 요소 간에 상태를 공유해야 하는 경우 useContext()를 사용할 수 있습니다.

이제 Navbar와 메시지라는 두 가지 구성 요소가 있으며 이들 사이에 상태를 공유하려고 합니다.

<div className="App">
  <Navbar/>
  <Messages/>
</div>

로그인 후 복사

첫 번째 단계는 React Context API를 사용하여 구성 요소 외부에 Context를 만드는 것입니다.

const AppContext = React.createContext({});

로그인 후 복사

컴포넌트 패키징 코드는 다음과 같습니다.

<AppContext.Provider value={{
  username: &#39;superawesome&#39;
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

로그인 후 복사

위 코드에서 AppContext.Provider는 하위 구성 요소에서 공유할 수 있는 Context 개체를 제공합니다.

Navbar 컴포넌트의 코드는 다음과 같습니다.

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

로그인 후 복사

위 코드에서 useContext() 후크 함수는 Context 개체를 도입하고 여기에서 사용자 이름 속성을 가져오는 데 사용됩니다.

Message 구성 요소의 코드도 비슷합니다.

const Messages = () => {
  const { username } = useContext(AppContext)
  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

로그인 후 복사

demo: https://codesandbox.io/s/react-usecontext-redux-0bj1v

useReducer(): 액션 후크

React 자체는 상태 관리 기능을 제공하지 않으며 일반적으로 외부 라이브러리 사용. 이를 위해 가장 일반적으로 사용되는 라이브러리는 Redux입니다.

Redux의 핵심 개념은 구성 요소가 상태 관리자와 통신하기 위한 작업을 실행한다는 것입니다. 상태 관리자는 작업을 받은 후 Reducer 함수를 사용하여 새 상태를 계산합니다. Reducer 함수의 형식은 (state, action) => newState입니다.

useReducers() 후크는 Reducer 기능을 소개하는 데 사용됩니다.

const [state, dispatch] = useReducer(reducer, initialState);

로그인 후 복사

위는 useReducer()의 기본 사용법입니다. Reducer 함수와 상태의 초기값을 매개변수로 받아들이고 배열을 반환합니다. 배열의 첫 번째 멤버는 상태의 현재 값이고 두 번째 멤버는 작업을 보내는 디스패치 함수입니다.

아래는 카운터 예시입니다. 상태를 계산하는데 사용되는 Reducer 함수는 다음과 같습니다.

const myReducer = (state, action) => {
  switch(action.type)  {
    case(&#39;countUp&#39;):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

로그인 후 복사

컴포넌트 코드는 다음과 같습니다.

function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    <div className="App">
      <button onClick={() => dispatch({ type: &#39;countUp&#39; })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

로그인 후 복사

demo: https://codesandbox.io/s/react-usereducer-redux-xqlet

Hooks는 공유 상태 및 Reducer 기능을 제공할 수 있으므로 이러한 측면에서 Redux를 대체할 수 있습니다. 하지만 미들웨어와 시간여행을 제공할 수는 없습니다. 이 두 가지 기능이 필요하다면 Redux를 사용해야 합니다.

useEffect(): 부작용 후크

useEffect()는 부작용이 있는 작업을 소개하는 데 사용되며 가장 일반적인 것은 서버에서 데이터를 요청하는 것입니다. 이전에 componentDidMount에 배치된 코드를 이제 useEffect()에 배치할 수 있습니다.

useEffect()는 다음과 같이 사용됩니다.

useEffect(()  =>  {
  // Async Action
}, [dependencies])

로그인 후 복사

上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。

下面看一个例子。

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])
  if (loading === true) {
    return <p>Loading ...</p>
  }
  return <div>
    <p>You&#39;re viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

로그인 후 복사

上面代码中，每当组件参数personId发生变化，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。

demo：https://codesandbox.io/s/react-useeffect-redux-9t3bg

创建自己的 Hooks

上例的 Hooks 代码还可以封装起来，变成一个自定义的 Hook，便于共享。

const usePerson = (personId) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);  
  return [loading, person];
};

로그인 후 복사

上面代码中，usePerson()就是一个自定义的 Hook。

Person 组件就改用这个新的钩子，引入封装的逻辑。

const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);
  if (loading === true) {
    return <p>Loading ...</p>;
  }
  return (
    <div>
      <p>You&#39;re viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

로그인 후 복사