理解シンプルなアプリを構築することによってフックフック

我々は、機能コンポーネントのクラスのコンポーネントの概念を使用することができますフックの最新の反応機能を使用して簡単なアプリを構築する予定です.
このシリーズは、Stephen Griderによる「ReadXとRedux」シリーズの例からインスピレーションを受けましたudemy .
だから、あなたの端末を開き、新しい反応アプリを作成フックを反応させる.
反応フック
次に、そのディレクトリにCDを入れます.コードエディターを開き、反応アプリケーションを起動します.
初期設定
さて、いつものように、コードエディターでSRCディレクトリに移動し、すべてを削除します.
全て削除
次に、新しいファイルインデックスを作成します.srcフォルダ内のjs.その内容はコードの下になります.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
    <App />, document.querySelector('#root')
);

ここで、srcフォルダ内のコンポーネントディレクトリを作成し、新しいファイルアプリケーションを作成します.JSは、そのコンテンツは、コードの下になります.

import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
               App is rendered
            </div>
        )
    }
}

export default App;

それで、初期設定が正しいならば、あなたは我々のlocalhostで下記を見ます.
アプリケーションがレンダリングされます
次に、アプリを更新します.つのボタンをクリックすると、別のテキストが表示されます.

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


class App extends Component {
    state = { resources: 'posts' };

    render() {
        return (
            <div className="main__container">
                <span className="buttons__container">
                    <button onClick={() => this.setState({ resources: 'posts' })}>Posts</button>
                    <button onClick={() => this.setState({ resources: 'todos' })}>Todos</button>
                </span>
                <span>{this.state.resources}</span>
            </div>
        )
    }
}

export default App;

また、アプリケーションを作成することにより、CSSの小さなビットを追加します.同じフォルダ内のCSS.

.main__container {
    display: grid;
    place-content: center;
    grid-template-rows: 30px 30px;
    grid-gap: 10px;
}

.buttons__container{
    display: grid;
    grid-template-columns: 100px 100px;
    column-gap: 5px;
    font-size:1.5rem;
}

そして、我々のアプリは、以下のようになります.
ポスト
我々は今、機能ベースのコンポーネントにアプリを変更し、フックを使用するつもりです.
それで、フックの異なるタイプがあります.以下の図に記載されています.
異なる種類のフック
我々は我々のアプリで州を使用しているので、我々のアプリのためのUSENDフックが必要です.それで、フックを使うためにそれを変えましょう.主要な変更は太字であり、我々はまた、クラスベースのアプリケーションコンポーネントを機能的に変更されます.

import React, { useState } from 'react';
import './App.css';

const App = () => {
    const [resource, setResource] = useState('posts');

    return (
        <div className="main__container">
            <span className="buttons__container">
                <button onClick={() => setResource('posts')}>Posts</button>
                <button onClick={() => setResource('todos')}>Todos</button>
            </span>
            <span>{resource}</span>
        </div>
    )

}

export default App;

あなたが行くならばhttp://localhost:3000/ と、アプリをチェックし、同じ動作します.それは、我々の変化が成功したことを意味します.
しかし、行const [ resource , setresource ] = usestate (' post ')が図の下でどのように意味するかを理解できます.
USENTの説明
USENT ( ' post ')は2つの要素の配列であり、配列の破壊を行っているので、resource = usestate (' post ')[ 0 ]とsetresource = usstate (' post ')[ 1 ]
次に、ResourceListコンポーネントの作成を開始しますが、まずはAxiosをインストールしてGETリクエストを簡単なエンドポイントにします.だから、あなたの端末に移動し、実行しているアプリを停止し、Axios
インストール
さて、新しいファイルリソースを作成します.srcディレクトリ内の.次のクラスベースのコードを追加します.ここでは、2つのライフサイクルメソッド- ComponentDidmountとComponentDidupdateを使用しています.これは、初期のレンダリングでAPI呼び出しを行い、ユーザーがボタンをクリックするたびに.

import React, { Component } from 'react';
import axios from 'axios';

class ResourceList extends Component {
    state = { resources: [] };

    async componentDidMount() {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.item}`);
        this.setState({ resources: response.data });
    }

    async componentDidUpdate(prevProps) {
        if (prevProps.item !== this.props.item) {
            const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.item}`);
            this.setState({ resources: response.data });
        }
    }

    render() {
        return (
            <div>
                {this.state.resources.length}
            </div>
        )
    }
}

export default ResourceList;

さて、フックを使用するためにこれを変更します.LifeCycleメソッドのもう一つのフックが必要です.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ResourceList = ({ item }) => {
    const [resources, setResources] = useState([]);

    const fetchResource = async (item) => {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/${item}`);
        setResources(response.data);
    }

    useEffect(() => {
        fetchResource(item);
    }, [item])

    return (
        <div>
            {resources.length}
        </div>
    )
}

export default ResourceList;

さて、フックuseeffectは2つのライフサイクルメソッドの組み合わせです
エフェクトフック
最後に、我々のバックエンドAPIからのtodosや投稿の内容を示すことによって我々のアプリを完了することができます.ResourceListのreturn文で次を変更します.js

return (
        <ul>
            {resources.map(record => <li key={record.id}>{record.title}</li>)}
        </ul>
    )

そして、我々の最終的なアプリは以下のように見えます.
ファイナルアプリ
あなたはこのGithubで同じことの最終的なコードを見つけることができますlink .