私は反応に夢中です

反応を使用すると、今後のクラスを書くことなく、他の反応機能の状態を使用することができます新しい機能を導入してHooks , あなたの靴下を吹き飛ばして、我々のstatelessな機能構成要素を可能にすることになっている反応16.8.0の新しい提案は、前にも増します!

初期作業
フックと反応する学習のための環境設定の簡単な方法は以下のようになります.

npx create-react-app my-app
cd my-app
npm start

今、我々は反応アプリケーションを初期化している.
してください、あなたが適切なバージョンをインストールしている反応フックを使用することを確認してください16.8.0 ) 今日は反応の最新バージョンです.
使用しているバージョンを知りたい場合は、以下のコマンドを使用してください.npm info reactあなたが反応を更新して、DOMに反応したいならば、コマンドを使ってください.npm i react@next react-dom@next
反応フック
このポストでは、3つの基本的なフックに集中します.

useState
useEffect
useContext

反応はさらに導入されました、しかし、以下の特徴はより複雑で、別々に記述されなければなりません:

useReducer
useCallback
useMemo
useRef
useImperativeMethods
useLayoutEffect

米国不動産
さて、状態を機能的なコンポーネントに追加できます.そのために別のクラスを書く必要はありません.
単純なカウンタ状態の少ないコンポーネントを作成し、最初のフックを追加します.

export const Counter = () => {
   return (
       <div>
           <p>Counter value: </p>
           <button onClick={}>Increase</button>
           <button onClick={}>Decrease</button>
       </div>
   )
}

それは単純なカウンタです.私たちのカウンタが増加し、値を下げる場合は、ユーザーのプレスボタンonClick イベント.
動作する方法では、最初の引数として初期状態を渡すことができます.

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

The useState hook配列を返します.配列の最初のエントリは状態の現在の値です.配列の2番目のエントリは、状態を更新する関数です.
現在、状態と関数の現在値を渡すことができます.

export const Counter = () => {
   const [count, setCount] = useState(0);
   return (
       <div>
           <p>Counter value: {count}</p>
           <button onClick={() => {setCount(count + 1)}}>Increase counter</button>
           <button onClick={() => {setCount(count -1)}}>Decrease counter</button>
       </div>
   )
}

効果
フックの機能コンポーネントから副作用を避けるために.よく似ているcomponentDidMount and componentDidUpdate .
したがって、単にWLLをインポートし、カウンタに追加し、最初の引数として匿名関数を渡します.

const [count, setCount] = useState(0);
const [checked, changeCheckbox] = useState(true)
useEffect(() => {
   console.log('hello from useEffect')
})

今のところテキストhello from useEffect チェックボックスの現在の値を変更するたびに(つまり、関数が最初のレンディングを含むDOMへの変更をフラッシュするたびに)表示されます.
の本当の力useEffect 2番目のオプション引数を渡すことができます.次に、カウント値を変更した場合にのみこの効果を呼び出す必要があることを指定できます.

useEffect(() => {
   console.log('hello from useEffect')
}, [count])

さて、useEffect はカウントの状態が変化する場合にのみ呼び出されます.クール、右?

テキスト
想像してください、問題はインデックスファイルからのユーザーの名前と姓がコンポーネントに支柱として渡されるということです.
次の2つの機能コンポーネントを作成します.Header and LoginInfo . コンポーネントは、prop からDashboard .Dashboard 実際にそれを使用しない、ちょうどそれを下に渡さHeader これはユーザ状態から値を使用し、LoginInfo これにより、ユーザの名前も表示されます.
このアプローチはOKですが、我々はコンポーネントの束を通してユーザーを通過しなければなりませんDashboard それは気にしない.
それがよりよく見えるようにする1つの方法は、使用することですcreateContext , 新しいコンテキストを作成し、現在のコンテキスト値を返します.
それで、作成して、輸出しましょうContext 対象:

import React from 'react'
const Context = React.createContext()
export default Context

私たちのインデックスアプリケーションでは、コンテキストをインポートしていると<Context.Provider> そして、ユーザ値をpropとして状態から渡します.今、我々はすべての
州からの値へのコンテクスト消費者と私たちは、プロップとしてコンポーネントを通してそれを通過する必要はありません.

import React, { Component } from 'react';
import './App.css';
import { Dashboard } from "./Dashboard";
import Context from './Context'

class App extends Component {
   state = {
       user: 'John Doe'
   }
   render() {
       const {user} = this.state
       return (
           <Context.Provider value={user}>
               <Dashboard />
           </Context.Provider>
       );
   }
}
export default App;

今、私たちはuseContext 我々の文脈をフックして、ラップします、そこで、値はプロバイダー(我々のインデックス)から渡される値です.ユーザー変数に割り当てましょう.

import React, { useContext } from 'react'
import LoginInfo from './LoginInfo'
import Context from './Context'

const Header = () => {
    const user = useContext(Context)
    return (
        <div>
            <h1>Welcome {user}</h1>
            <LoginInfo />
        </div>

    )
}

export default Header

状況は、同じことですLoginInfo . 値を宣言するuser 使用によってuseContext フックと値はプロバイダー(インデックス)から渡される値です.

import React, { useContext } from 'react'
import Context from './Context'

const LoginInfo = () => {
    const user = useContext(Context)
    return (
        <h6>Logged as {user}</h6>
    )
}

export default LoginInfo

インLoginInfo and Header 現在、私たちは値としてpropユーザを持っていますので、我々はDashboard それはまったく使わない.

反応フック規制
それはうまく見えますが、フックについて知っているのは本当に良いです:

フックは、反応関数コンポーネントからのみ呼び出すことができます.

フックはトップレベルでのみ呼び出されるべきです.ループ、条件、入れ子になった関数の中で呼び出してはいけません.この規則に従うことによって、コンポーネントがレンダリングされるたびにフックが同じ順序で呼び出されることを確認できます.それは、反応が正しく複数の間のフックの状態を保存するのを許しますuseState and useEffect 呼び出し.(もしあなたが好奇心が強いなら、良い説明はhere ).

クラスベースのコンポーネントはこれ以上サポートされませんか?
フックとクラスベースのコンポーネントはまだ役に立つと思います.ドキュメントは「反応からクラスを削除する計画が全くない」と言います、そして、彼らは間違いなくフックにすべてを書き直すことを勧めません.それは個人です、そして、あなたは使用フックまたはクラスを決めるべきです.
フックは、反応で大きな特徴です.個人的には、安定版リリース後に使用しています.
当初公開brightinventions.pl
Patryk Huzarskiによって、ソフトウェアエンジニア＠明るい発明
Email