1. Props

propsとは何ですか.
これは、親コンポーネントから子コンポーネントにデータを送信する方法です.
もちろんだめですが、ConverterAppはAppコンポーネントの状態を使用できません.
こんなことが可能になるかもしれない.

1.1 Propsの使用

うん.似ていますが、少し違います.

 function Btn({x , y }){
            return <button style={{
                backgroundColor: "Tomato",
                color:"white",
                padding:"10px 20px",
                border:0,
                borderRadius:10,
            }}> {x ? x : y} </button>;
}

componentにパラメータを入力できます.

<Btn text="Save Changes" x="2" />
<Btn text="Confirm" y = "4"/> 

伝達される因子は制限されず、
アイテムを受け取るx props.あるいはy
私が書いたように{x,y,text}で受信します.
私がここに書いたコードは、xがあれば、xがなければ、yのボタンを印刷することです.

運転がよい.
和音に合わせて打つのも向上に役立ちますが、少しねじってみると頭に残りやすいです.

1.2 Propsパラメータの制限は？

どこまで届くか見てみましょう.
予想するとコンポーネントやStateを送ることも可能でしょうか?

<Btn text={value} x="2" onClick={changeValue}/> 

前述したように、onClickイベントリスナーが作成されたように錯覚を引き起こします.
しかし実際には誰も変わらず、支柱をBtnに伝えるだけだ.
次にコンポーネントに戻ります

function Btn({onClick,text,x , y }){
            return <button style={{
                backgroundColor: "Tomato",
                color:"white",
                padding:"10px 20px",
                border:0,
                borderRadius:10,
                }}
            onClick ={onClick}
            > {text} </button>;
        }

ここでeventListenerを設定します.

1.3 React.memo()

function App() {
            const [value, setValue] = React.useState("Save Changes");
            const changeValue = () => setValue("Revert Changes");
            return(
                <div>
                    <Btn text={value} x="2" onClick={changeValue}/> 
                    <Btn text="Confirm" y = "4"/> 
                </div>
            );
}

作成したコードは、最初のボタンのpropsのみを変更します.ただし、Reactのルールに従って、ブラウザはアプリケーション内のすべてのコンテンツを再レンダリングします.これは効率的ではありません.
したがって、Propを変更しない限り、再レンダリング機能は最適化に役立ちます.React.memo()機能を使用すればよい.

const MemorizedBtn = React.memo(Btn)
        function App() {
            const [value, setValue] = React.useState("Save Changes");
            const changeValue = () => setValue("Revert Changes");
            return(
                <div>
                    <MemorizedBtn text={value} x="2" onClick={changeValue}/> 
                    <MemorizedBtn text="Confirm" y = "4"/> 
                </div>
            );
        }

簡単な変更だけで、ブラウザは2番目のConfirmtextコンポーネントを再レンダリングしません.

1.4 Prop Types

コラボレーション時に小さなミスを防ぐ機能です.

MemorizedBtn.propTypes = {
            text: PropTypes.string,
            x: PropTypes.number,
            y: PropTypes.number,
        }

この設定は、MemorizedBtnのpropを強制的にtypeします.
書き間違えた場合は、次の警告が表示されます.
y = "4"数字ではなく文字をスキップしました.
proptypeはこのような時に警告します.y = {4}に変更するまで消えません.

2. create-react-app

2.1 nodejs

craを使用するには、まずnodejsをインストールする必要があります.
node.私はjsがバックエンドであることを知っています.まずインストールしましょう.
時間がかかります...
npm startにより開発用のサーバを構築した.
最終目標はこれを針金団に変えることです.

2.2独立符号化とcss

スタイルを適用する場合は、.module.cssというファイルで行うのが便利です.
App.アプリケーションはjsのスタイルに使用されます.module.cssという名前のファイルを作成します.
クラスを作成するだけでstyleを適用できます.App.module.css

.title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    color:blueviolet;
}

App.js

import styles from "./App.module.css";
function App() {
  return (
    <div>
      <h1 className={styles.title}>
        Welcome Back!!
      </h1>
      <Button text="Hello React"/>
    </div>
  );
}

2.3 Effect

Reactのコアリアクション型アプリケーションのためのEffectですか?
一番大切だと言って、しばらく休んでからします.

2.3.1一度だけ実行するコード

ボタンのonClickEventリスナーに関連付けられた関数を作成すると、どんなコンテンツが表示されても一緒に実行されます.
たとえば

const onClick = () => setValue((prev) => prev+1);
console.log("Hi , I'm rendered);
 

以上のコードは、ボタンが押されたときに表示されます.console.ログを実行します.
しかし、場合によっては、初対面で挨拶したいだけかもしれません.

const onClick = () => setValue((prev) => prev+1);
???(console.log("Hello , I'm rendered in first));
  

このような状況を理解してみましょう.
(もちろん、別のstateを作成して条件文を使用すると簡単です)

console.log("I run all the time");
useEffect(()=>console.log("I run only once"),[]);

これがuseEffect関数です.
最初のパラメータとしてこの関数に入る関数は,状態が変化しても再実行されない.

一度だけ実行します.

2.3.2 Deps

EffectはUSEffect関数に対して反応型ではない.
要するに,2番目のパラメータに入るDepsとは何かを理解しよう.

useEffect(()=>{
    console.log("searching for", keyword);
  },[keyword]);

2番目の因子は追跡可能な状態にある.以上のコードは、キーワードが変化した場合にのみconsole.logが実行されます.
上に書いたコードは追跡可能な状態がないので、一度だけ(空の配列)実行します.

2.3.3練習

App.js

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev+1);
  const onChange = (event) => setKeyword(event.target.value);
  console.log("I run all the time");

  useEffect(()=>console.log("I run only once"),[]);

  useEffect(()=>{
    console.log("searching for", keyword);
  },[keyword]);
  return (
    <div>
      <input 
        value={keyword} 
        onChange={onChange} 
        type="text" 
        placeholder="Search here . . ."/>
      <h1 className={styles.title}>
        {counter}
      </h1>
      <Button onClick={onClick} state={counter} text="Click me"/>
    </div>
  );
}

Button.js

function Button({text , onClick , state}){
    useEffect(()=>console.log("The thing i chase is ",state) , [state])
    return <button onClick={onClick} className={styles.btn}>{text}</button>;
}

App.jsカウンタはstateパラメータを介してButtonに渡される.

Button.jsButton componentはstateパラメータを受信し、その変化を追跡して出力する.

思い通りにそろばんをはじく
サブコンポーネントが親のstateを継承すれば、親のstateを追跡することができます.

Why react again

reactは、最小単位をレンダリングできるので良いです.
しかし,本章で学んだ効果機能を用いなければ,その原則に反する.
他の機能のボタンをクリックすると、もちろん検索ウィンドウの入力を追跡する理由はありません.
適切なuseEffectを使用して、必要な部分を再実行するだけのコードを作成します.