簡単にUSENT反応フックで

私はちょうど反応フックを学び始めました、そして、私はすでにこれがよりきれいでよりまじめになるために私のコードを変える方法について興奮しています!

何が反応フックですか?
フックは、反応16.8で利用できます.これは、我々は機能のコンポーネントを使用して反応アプリケーションを構築する機能を提供し、我々は現在、クラスのコンポーネントに依存せずに状態を使用することができますし、我々は反応機能にフックすることができます.
これはかなり素晴らしいです.なぜなら、関数の状態を使用する必要がある場合は、関数のコンポーネントをクラスコンポーネントに変換する必要がないからです.
反応はいくつかのビルトインフックとともに来ます、しかし、あなたは我々自身も建設することができました.このブログでは、私はどのようにビルトインフックの1つを利用することができたかをあなたに示すつもりですuseState .

米国不動産
フォームを作成する場合、一般的にこのクラスコンポーネントのように見えます.

import React, { Component } from 'react';

class Form extends Component {
  state = {
    input: ''
  }

  handleOnChange = (event) => {
    this.setState({
      input: event.target.value
    })
  }

  render() {
    return (
      <div>
        <form>
          <label>
            Input Field: 
            <input type='text' input='input' />
          </label>
          <button type='submit'>Submit</button>
        </form>
      </div>
    )
  }
}

ここでのすべては、入力フィールドの変更の値としてコンポーネントの状態を更新することです.正確な同じことは、これを機能性コンポーネントに変換して、使用することを実行することによって、なしとげられることができますuseState :

// First, let's change the import:
import React, { useState } from 'react';

// Convert the class component into a functional component:
const Form = () => {
  // Here we will change the way we access state:
  const [input, setInput] = useState('');

  // We can remove render() as this is a functional component that just needs to return JSX:
  return (
    <div>
      <form>
        <label>
          Input Field: 
          <input
            // Instead of declaring a separate function for updating the state, we can simply do that here:
            onChange={event => setInput(event.target.value)}
            type='text' 
            input='input' />
        </label>
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
}

そこで私たちがここで何をしたかを説明するために、まずuseState パッケージを使用してコードを使用できます.また、我々はもはやインポートされていないことに注意してComponent .
次に、クラスコンポーネントを機能コンポーネントに変換します.我々はもはやキーワードへのアクセスを持っていないことを忘れないでくださいthis , それで、それのどんなインスタンスも取り除かれる必要があります.
今、実際に使用することになるとuseState , 以下に構文を示します:

const [input, setInput] = useState('');

useState 2つの値を返します:1)現在の状態と2)それを更新する関数(これらの変数は何かを命名できます).我々が呼ぶときuseState() , 初期状態で引数として渡します.この場合、空の文字列です.
次の変更は削除することでしたrender() . 私たちは今、機能的なコンポーネントを持っています.
最後に、フォーム内でsetInput 関数はonChange 状態の値を更新できるイベント.私たちは、handleOnChange 関数と呼ばれsetInput そこには、そこにたくさんのことが起こっていなかったので、私はちょうど先へ行って、それを取り除きました.
そりゃ!」同じように動作し、より少ない行のコードが必要です.
Here is the awesome documentation for React Hooks!