反応フックの使用

プロジェクトに取り組んでいるときには、どのようなコンポーネントがステータスやステートレスになるのかはわかりません.これは、コンポーネントを構成するか、機能的にすることができるように、前に考慮するかもしれないものです.状態はクラスベースのコンポーネントの中にのみ存在することができますので、状態を必要とするという結論に達した場合は、関数ベースのコンポーネントをクラスベースのコンポーネントにリファクタリングする必要があります.これはあなたから離れて貴重な時間を取ることができますし、時々リファクタに手間.反応フックは、クリーンなコードを作成し、簡単に機能的なコンポーネントの内部の状態を管理することができます!このブログでは、あなたの利点に反応フックUSENTを使用する方法を示します.あなたがフックを利用するために反応版16.8以上を使用していることを確認してください.

フックの使い方

import React, { useState } from 'react'

function ToDoListForm() {

    return (
      <div>
        <h1>My Todo List!</h1>
        <input/>
        <button>Add</button>
      </div>
    );
  }

  export default ToDoListForm;

                                          //ToDoListForm.Js

まず、機能コンポーネントで使用するフックをインポートします.
複数のフックがuseeffect、usecontextとusereducerのように提供する反応があります.あなたはそれらについて読むことができますhere.

import React, { useState } from 'react'

function ToDoListForm() {

    const [ inputTask, setInputTask ] = useState('')

    const submitHandler = () => {

      }

    return (
      <div>
        <h1>My Todo List!</h1>
        <input/>
        <button>Add</button>
      </div>
    );
  }

  export default ToDoListForm;
                                      //ToDoListForm.Js

第二に、usEstateは2つの要素の配列を返します.最初の要素はあなたの現在の状態になります.番目の要素は
あなたの状態を設定する関数.読みやすさのために配列破壊を使用するのが最善でしょう.私も、私の状態を空のストリングであることを初期化しています.クラスとベースの状態とは対照的に状態とフックとの鍵の違いは、あなたが望むものを使用して状態を初期化することができますです.文字列、配列、論理、オブジェクト.クラスでは、状態は常にオブジェクトです.この場合、私はonchangeイベントから戻ってくるものから空の文字列を初期化しています.

import React, { useState } from 'react'

function ToDoListForm() {

   const [ inputTask, setInputTask ] = useState('')

   const submitHandler = () => {

   }

    return (
      <div>
        <h1>My Todo List!</h1>
        <input
          type="text"
          value={inputTask}
          onChange={ event => {
              setInputTask(event.target.value)
            }
           }
        />

          <button >Add</button>
      </div>
    );
  }

  export default ToDoListForm;                 
                                  //ToDoListForm.js

第三に、ユーザーの種類ごとに状態を設定します.OnChangeイベントを使用できます.OnChangeは入力で入力された値から値を取得します.イベントを通してこの値を得ることができます.ターゲット.値.usstateが状態を更新する関数である2番目の要素を返す方法を覚えておいてください.さてここで我々は単にイベントを通過それを呼び出すことができます.ターゲット.値.

import React, { useState } from 'react'

function ToDoListForm(props) {

   const [ inputTask, setInputTask ] = useState('')

   const submitHandler = () => {
     props.addUserTask({task: inputTask});
   }

    return (
      <div>
        <h1>My Todo List!</h1>
        <input
          type="text"
          value={inputTask}
          onChange={ event => {
              setInputTask(event.target.value)
            }
           }
        />
          <button onClick={submitHandler}>Add</button>
      </div>
    );
  }

  export default ToDoListForm

最後に、ユーザーがボタンをクリックした後に、タスクの配列に入力値を取得する親コンポーネントから渡されたprop(props . adduserTask)を使用します.私たちがしなければならないことは、現在の状態である最初の要素usstate returnを小文字に渡すことです.addusertask.データを親コンポーネントの兄弟コンポーネントに運んでいるので、オブジェクトを渡す.そこで私は値を取るし、画面に表示されます.私はあなたが今どのようにフックの仕事をよく理解してほしい!読書とハッピーコーディングのおかげで.