反応18 whats新しい

36579 ワード

react javascript beginners webdev テキストリンク

反応(バージョン18)の最新版は、公式に利用できました.それは多くの新機能と舞台裏の変化をもたらしました.そして、それはフレームワークをより強力にしました.反応はJavaScript開発者のための選択の最初と優先フレームワークを続けており、常に非常に企業の後に求められている.
多くの新機能は反応18で導入されました、そして、今日、それらの機能が彼らのプロジェクトで開発者によって最も利用されそうであるので、我々はより人気のあるもののいくつかをカバーします.以下をカバーします.

反応サスペンス

新しいルートAPI

新しいUSUSIDフック

新しいUseTransitionフック

サスペンス反応

REST APIを使用する場合、データを取得する2つの方法があります.同期または非同期でそれらを行うことができます.同期API呼び出しは、要求が完了するまで、またはデータを返すいくつかのエラーが発生するまで何も返すことができないので、呼び出しをブロックすることとして知られています.このタイプのAPI呼び出しはアプリケーションをロックして、ユーザーが行動をするまで何かをするのを防ぎます.
一方、非同期API呼び出しはこれと全く逆です.それは非ブロッキングです、そして、要求がバックグラウンドで処理し続けている間、応答はすぐに返されます.あなたのアプリケーションは、応答のままであり、データがバックグラウンドで取得されている間、あなたがそれを使用し続けることができるように何かを待つのをロックしません.これは、フロントエンドのユーザーにはるかに良い経験を与える.
本質的に反応サスペンスは非同期です.なぜなら、APIやデータ構造の内部にデータをレンダリングする前に、何かが起こるのを待つようにコンポーネントを強制するからです.コンポーネントは、画面上でレンダリングされる前にいくつかのデータを取得するのに非同期API呼び出しを待機する必要があります.舞台裏では、データはロードされます、そして、彼らがフロントエンドで何かが起こっているのを意識しているように、それはユーザーにフォールバックプリローダーを示すことが可能です.

反応サスペンス

これは反応サスペンスと反応を組み合わせた新しい構文です.LAZY () APIApp.js

// The new syntax for React 18 using React.lazy() to delay loading the component so that Suspense works properly.

import { Suspense, lazy } from 'react';

const Pokemon = lazy(() => {
    return import('./Pokemon');
});

const App = () => {
    return (
        <Suspense fallback={<h1>Loading pokemon...</h1>}>
            <Pokemon />
        </Suspense>
    );
};

export default App;

Pokemon.js

// The new syntax for React 18

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

const Pokemon = () => {
    useEffect(() => {
        const getPokemons = () => {
            const API = 'http://pokeapi.co/api/v2/pokemon?limit=500';

            fetch(API)
                .then((response) => {
                    console.log(response);

                    return response.json();
                })

                .then((data) => {
                    console.log(data.results);

                    setData(data.results);
                })

                .catch((err) => {
                    console.log(err);
                });
        };

        getPokemons();
    }, []);

    const [data, setData] = useState([]);

    return (
        <>
            {/* You don't need a ternary operator with a variable for loading anymore */}

            {data.map((pokemon) => (
                <div key={pokemon.name}>
                    <h2>{pokemon.name}</h2>
                </div>
            ))}
        </>
    );
};

export default Pokemon;

三項演算子の例

これは、JavaScriptの三項演算子を使用して、データが読み込まれているか、読み込まれているかどうかをチェックする変数の状態を組み合わせた古い構文です.データがまだロードされていないときにプリローダが表示され、データが完了したときに表示されます.App.js

// The old syntax

import Pokemon from './Pokemon';

const App = () => {
    return (
        <>
            <Pokemon />
        </>
    );
};

export default App;

Pokemon.js

// The old syntax

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

const Pokemon = () => {
    useEffect(() => {
        const getPokemons = () => {
            const API = 'http://pokeapi.co/api/v2/pokemon?limit=500';

            fetch(API)
                .then((response) => {
                    console.log(response);

                    return response.json();
                })

                .then((data) => {
                    console.log(data.results);

                    setLoading(false);

                    setData(data.results);
                })

                .catch((err) => {
                    console.log(err);
                });
        };

        getPokemons();
    }, []);

    const [data, setData] = useState([]);

    const [loading, setLoading] = useState(true);

    return (
        <>
            {/* The old syntax using ternary operators with a variable for loading */}

            {loading ? (
                <h1>Loading pokemon...</h1>
            ) : (
                <div>
                    {data.map((pokemon) => (
                        <div key={pokemon.name}>
                            <h2>{pokemon.name}</h2>
                        </div>
                    ))}
                </div>
            )}
        </>
    );
};

export default Pokemon;

新規ルートAPI

Reply 18はルートインデックスの新しい構文を持っています.新しい機能と改善へのアクセスを与えるJSファイル.以前の構文では、コンソールに赤警告メッセージを与えます.RAIDはもはや反応18でサポートされません.警告メッセージをクリアするには、新しい構文を使用します.
現在、代わりにCreateOutを使用する必要がありますし、新しいAPIに切り替えるまで、あなたのアプリケーションは、17が反応しているように振る舞うでしょう.新しいルートAPIには、クリーナーでより明確な構文があり、新しい同時レンダラが有効になっているので、以前のAPIではできないコンカレント機能にアクセスできます.

新しい構文

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

古い構文

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

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

新しいuseidフック

18を使用すると、新しいUseIDフックを使用してDOM要素を作成するときにIDの生成に便利な方法を与えます.あなたが複数のIDを持っている場合でも、それを一意にする“Twitter”のような接尾辞を追加することができます.
ボーナスのヒント:例えば、htmlforタグを追加することでラベルをクリック可能にすることができます.App.js

import { useId } from 'react';

const App = () => {
    const id = useId();

    return (
        <>
            <div>
                <label htmlFor={`${id}-twitter`}>Do you have a Twitter?</label>

                <input id={`${id}-twitter`} type="checkbox" name="twitter" />
            </div>

            <div>
                <label>Do you have a Instagram?</label>

                <input id={`${id}-instagram`} type="checkbox" name="instagram" />
            </div>

            <div>
                <label>Do you have a YouTube?</label>

                <input id={id} type="checkbox" name="youtube" />
            </div>
        </>
    );
};

export default App;

新しいUseTransitionフック

反応18では、画面にそれをレンダリングする前に、データを読み込むために、新しいUseTransitionフックを使用できます.戻り値を使うときは、各ローディングの移行にプリローダを作成できます.
このカスタムカルーセルスライダーでアクションでそれを見ることができます.App.js

import { useState, useEffect, useTransition } from 'react';

const App = () => {
    useEffect(() => {
        mountain().then((data) => {
            console.log(data);

            setLoading(false);

            setData(data);
        });
    }, []);

    let [data, setData] = useState([]);

    let [loading, setLoading] = useState(true);

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

    let [index, setIndex] = useState(0);

    let [isPending, startTransition] = useTransition();

    const showNext = () => {
        startTransition(() => {
            setCount(count + 1);
        });

        setIndex(count + 1);

        console.log('Count', count + 1);
    };

    const showPrevious = () => {
        startTransition(() => {
            setCount(count - 1);
        });

        setIndex(count - 1);

        console.log('Count', count - 1);
    };

    const mountain = (loaded) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (loaded) {
                    reject(new Error('Failed to load data'));
                } else {
                    resolve([
                        {
                            id: 0,

                            name: 'Mountain 1',

                            img: 'https://images.unsplash.com/photo-1570641963303-92ce4845ed4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80',
                        },

                        {
                            id: 1,

                            name: 'Mountain 2',

                            img: 'https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2051&q=80',
                        },

                        {
                            id: 2,

                            name: 'Mountain 3',

                            img: 'https://images.unsplash.com/photo-1472791108553-c9405341e398?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2137&q=80',
                        },
                    ]);
                }
            }, 2000);
        });
    };

    return (
        <>
            {loading ? (
                <h1>Loading...</h1>
            ) : (
                <div>
                    {isPending ? (
                        <div>
                            <h1>Loading the next image</h1>
                        </div>
                    ) : (
                        <div>
                            <h1>{data[index].name}</h1>

                            <img src={data[index].img} alt="Mountain" style={{ width: '100%', height: '300px', maxWidth: '500px' }} />
                        </div>
                    )}
                </div>
            )}

            <button onClick={showPrevious} disabled={count === 0 ? true : false}>
                Previous
            </button>

            <button onClick={showNext} disabled={count === 2 ? true : false}>
                Next
            </button>
        </>
    );
};

export default App;

最後の思考

これは、反応18の内部の新機能への簡単な導入でした.すべての新しい文書React v18.0を参照してください公式ブログを見てください.

Reference

この問題について(反応18 whats新しい), 我々は、より多くの情報をここで見つけました https://dev.to/andrewbaisden/react-18-whats-new-2b1f

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

セットアップです.ピー?

Gitにおける高感度データの除去