反応フックとは何ですか?

React フックは React16.8 の新機能であり、React 関数コンポーネントが状態を持つことを可能にし、componentDidMount やcomponentDidUpdate などのライフサイクル メソッドを提供します。

React クラス コンポーネントのほとんどは状態を保存できますが、関数コンポーネントは状態を保存できません。また、クラスコンポーネントにはライフサイクルがありますが、関数コンポーネントにはライフサイクルがありません。

React の初期のバージョンでは、クラス コンポーネントは PureComponent を継承することで不要なレンダリングを最適化できます。関数コンポーネントと比較して、React 公式 Web サイトには、不要なレンダリングを減らすために関数コンポーネントをキャッシュする対応するメソッドが提供されていません。16.6 直接React.memo関数が出てきます。

React 16.8 の新しいフックでは、React 関数コンポーネントに状態を持たせ、componentDidMount やcomponentDidUpdate などのライフサイクル メソッドを提供できます。

フック 「フック」を意味する言葉です。

React Hooks は、コンポーネントが可能な限り純粋な関数として記述されるべきであることを意味します。外部関数と副作用が必要な場合は、フックを使用して外部コードを「フック」する必要があります。 React Hook はそのフックです。

必要なフックを使用してください。 React はデフォルトでいくつかの一般的なフックを提供しており、独自のフックをカプセル化することもできます。

すべてのフックは関数に外部関数を導入するため、React は識別しやすいようにフックの名前に use プレフィックスが付いていることに同意します。 xxx 関数を使用する場合、フックの名前は usexxx になります。

以下では、React がデフォルトで提供する最も一般的に使用される 4 つのフックを紹介します。

• #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) です。 2 番目のメンバーは状態の更新に使用される関数で、規則は set プレフィックスと状態の変数名です (上記の例は setButtonText)。

useContext(): 状態共有フック

コンポーネント間で状態を共有する必要がある場合は、useContext() を使用できます。

現在、Navbar と Messages という 2 つのコンポーネントがあり、それらの間で状態を共有したいと考えています。

<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 オブジェクトを導入し、そこからユーザー名属性を取得します。

メッセージ コンポーネントのコードも同様です。

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>
  )
}

デモ：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関数と状態の初期値をパラメータとして受け取り、配列を返します。配列の最初のメンバーは状態の現在の値で、2 番目のメンバーはアクションを送信するディスパッチ関数です。

以下はカウンタの例です。状態の計算に使用される Reducer 関数は次のとおりです。

const myReducer = (state, action) => {
  switch(action.type)  {
    case('countUp'):
      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>
  );
}

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

フックは共有状態と Reducer 関数を提供できるため、これらの点で Redux を置き換えることができます。ただし、ミドルウェアとタイムトラベルは提供できないため、これら2つの機能が必要な場合は、やはり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>
  );
};

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

更多编程相关知识，请访问：编程学习网站！！

以上が反応フックとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。