符号化されていないデコーダreactiJS#3.0~#3.9

#3.0 Understanding State
React.jsのstateはデータを格納する場所です.作成中のクリック回数を計算することで、画面出力のプログラムでstateを使用してこのカウンタ(変化したデータ)を作成できます.

<script type="text/babel">
        const root = document.getElementById("root");
        let counter = 0;
        function countUp(){
            counter = counter+1;
            render();	// 데이터가 변화할 때마다 리렌더링
        }
        function render(){
            ReactDOM.render(<Container />, root);
        }
        const Container = () => (
            <div>
            	// JSX에서 변수는 `${}`필요없이 아래와 같이 {변수명} 만으로 사용 가능하다
                <h3>Total clicks : {counter}</h3>
                <button onClick={countUp}>Click me</button>
            </div>
        );
        render();
    </script>

とても重要なポイントです!React.jsは、以前にレンダリングされたコンポーネントと後でレンダリングされるコンポーネントを表示し、他の部分のみを変更します.
さまざまな要素を再レンダリングしても、すべてが再生成されるのではなく、置き換えられた部分のみが生成されます.これがreactを使用する最大の理由です.
上記のコードは、データが変更されるたびに再表示されることを忘れないでください.次のビデオでは、再表示の良い方法について説明します.
#3.1 setState part One
この章ではReactですjsアプリケーション内でデータを保存し、自動的に再有効にする方法を学びます.
const data = React.useState(0);
->データは[0,f]です.これは、私たちが含むデータ値と、その値を変更するための関数を含む配列です.

配列から要素

を取り出す.

const food = ["tomato", "potato"]
// 배열의 요소에 이름 할당
const [myFavFood, mySecondFavFood] = food;
// 이렇게 하는 것과 동일하다
// const myFavFood = food[0];
// const mySecondFavFood = food[1];

// const data = React.useState(0);
// 이렇게 쓸 수 있다.
const [counter, modifier] = React.useState(0);

次にmodifierを使用してcounterの値を変更する方法を学びます!
3.2 setState part Two

const [counter, setCounter] = React.useState(0);
const onClick = () => {
	setCounter(counter + 1);
};

以上のように、stateを使用してsetCounter()の値に自動的にデータを変換してレンダリングします.
#3.3 Recap
内容を整理する.
modify関数でステータスが変化すると、新しい構成部品が作成されます.データを変更するたびに、構成部品が再レンダリングされ、UIが更新されます.jsが提供する最も重要な部分.
#3.4 State Functions

const [counter, setCounter] = React.useState(0);
const onClick = () => {
	setCounter(counter + 1);
};

前のステップのstateを使用して現在のstateを置き換える(既存のカウンタ値を使用して新しいカウンタ値を計算する)のはよくありません.counterが変更されている可能性があるため、想像した値ではありません.他のstateを変える方法を見てみましょう.

// setCounter(counter + 1);
setCounter(current => current+1);

上の2行は同じ仕事をしていますが、下に書いたほうが安全です.反応器はこの電流が確かに現在値であることを保証するからだ.
#3.5 Inputs and State

<div>
	<h1>Super Converter</h1>
    <label for="minutes">Minutes</label>
    <input id="minutes" placeholder="Minutes" type="number" />
    <label for="hours">Hours</label>
    <input id="hours" placeholder="Hours" type="number" />
</div>

Labelラベルのテキストを入力すると、各リンクの入力が選択されます.上はHTMLでlabelとinputを接続(forを使用)していますが、JSXでは間違った構文です.JSXはHTML構文に似ていますが、いくつか注意が必要です.classやforなどはすでにJavaScriptの定語なのでclassの代わりにclassName、htmlForの代わりにforを使うべきです.

function App(){
            const [minutes, setMinutes] = React.useState(0);
            const onChange = (event) => {
                setMinutes(event.target.value);
            }
            return (
                <div>
                    <h1>Super Converter</h1>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                        value={minutes}
                        id="minutes" 
                        placeholder="Minutes" 
                        type="number"
                        onChange={onChange} 
                    />
                    <h4>You want to convert {minutes}</h4>
                    <label htmlFor="hours">Hours</label>
                    <input id="hours" placeholder="Hours" type="number" />
                </div>
            );
        };

stateを使用して、inputのvalueをstateに接続し、ユーザーが入力したminutes値を受信するまで接続します.
#3.6 State Practice part One

function App(){
            const [minutes, setMinutes] = React.useState(0);
            const onChange = (event) => {
                setMinutes(event.target.value);
            }
            const reset = () => setMinutes(0);
            return (
                <div>
                    <h1>Super Converter</h1>
                    <div>
                        <label htmlFor="minutes">Minutes</label>
                        <input 
                            value={minutes}
                            id="minutes" 
                            placeholder="Minutes" 
                            type="number"
                            onChange={onChange} 
                        />
                    </div>

                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 
                            value={Math.round(minutes/60)}
                            id="hours" 
                            placeholder="Hours" 
                            type="number" 
                        />
                    </div>
                    <button onClick={reset}>Reset</button>
                </div>
            );
        };

hoursのinput valueにもstateを接続し、入力した分を時間に変換するプログラムを作成しました.すべてをゼロにするresetボタンも追加されました!
次のセクションでは、disabledとflipで時間を入力するか、分に変換できます.
#3.7 State Practice part Two

        function App(){
            const [amount, setAmount] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = (event) => {
                setAmount(event.target.value);
            }
            const reset = () => setAmount(0);
            const onFlip = () => {
                reset();
                setFlipped((current) => !current);
            }
            return (
                <div>
                    <h1>Super Converter</h1>
                    <div>
                        <label htmlFor="minutes">Minutes</label>
                        <input 
                            value={flipped? amount*60 : amount}
                            id="minutes" 
                            placeholder="Minutes" 
                            type="number"
                            onChange={onChange} 
                            disabled={flipped}
                        />
                    </div>
                    
                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 
                            value={flipped ? amount : Math.round(amount/60)}
                            id="hours" 
                            placeholder="Hours" 
                            type="number" 
                            disabled={!flipped}
                            onChange={onChange} 
                        />
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flip</button>
                </div>
            );
        };

flipボタンを使って障害者の状態を反転させ、ボタンをクリックするたびに時間と分の入力が交互に有効になります.3つの演算子を使用すると、それぞれの場合に適切な単位変換が可能になります.
#3.8 Recap
復習!内容を整理!
#3.9 Final Practice and Recap

function App(){
            const [index, setIndex] = React.useState("0");
            const onSelect = (event) => {
                setIndex(event.target.value);
            }
            return (
                <div>
                    <h1>Super Converter</h1>
                    <select value={index} onChange={onSelect}>
                        <option value="0">Minutes & Hours</option>
                        <option value="1">Km & Miles</option>
                    </select>
                    <hr />
                    {index === "0" ? <MinutesToHours /> : null}
                    {index === "1" ? <KmToMiles /> : null}
                </div>
            );
        };

以前に作成した機能は、MinutesToHoursという名前の関数に置き換えられ、KMToMiles変換機能を持つ別の関数が作成され、selecttagを使用して画面上でいずれかを選択して表示されます.