コードキャンプ6日目

2831 ワード
setState Props container/presenter コードセット フォルダ構造 テキストリンク
  • ユーティリティフォルダ構造
  • コンポーネント分離およびデータ転送(Props)
  • リスト形式のデータ(Map/Filter)
    • を表示する.
    セキュリティコード作成
  • (Typescript)
  • 規則を制定して協力する
    未定義/null間の差異
    どちらも値がNULLであることを示します.
    nullはデフォルトのルールとして使用され、開発者が故意にこの部分を空にしたことを示します.
    未定義の意図に関係なく、空の部分です.

    フォルダ構造の整理


    コラボレーション開発者にとって、1つのファイルの長さが長くなると、
    多くの人が使うと、必要な部分を見つけるのが難しく、読むのも難しい.
    したがって、フォルダ構造を変更することでこの問題を解決します.

    構成部品を分離してデータを渡す


    Container/Presenter


    フォルダの構造を分割
    BoardWrite.contaniner.js
    BoardWrite.Presenter.js
    このように分けます.分かち合う形のために、名前は
    BoardWrite-contaniner.js
    BoardWriteContaniner.js
    これでも大丈夫です.

    importとexportを同じフォーマットで区切ります.
    Javascriptセクションの内容はContainerに含まれています
    return文のHTMLの内容はPresenterで共有されています.
    ここで、Concontainerセクションは親コンポーネントに属します.
    importでロードされたPresenterセクション(=BoardWriteUI)は、サブコンポーネントに属します.

    Props


    -親構成部品が子構成部品に継承する変数/関数-
    これはcontainer部分の変数と関数をPresenterに渡す部分です.

    Containerセクションで作成されたaaa = {handleChangeWriter}宣言によるアイテムはonChange={props.aaa}に収録されている.
    -現在のページ-条件
    子は親を指すことはできません.
    「流れは一方向」.
    また、これは相対的な部分であるため、プレゼンテーション者は親コンポーネントとなり、感情部分は子コンポーネントとなる可能性がある.
    export defaultはページごとに1つしか作成できません.
    defaultでimpaultを設定すれば、設定した名前に従って調整すれば自由に名前を設定できます.
    一般的に(export const~~)importはコンテンツで選択する必要があり、import部分には{}が必要です.

    setStateの動作原理

     const onChangeContents = (event) =>{
        setMyContents(event.target.value)

        if(mywriter !== "" && mytitle !== "" && mycontents !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )
    }
    上記の関数があれば、入力値がsetMyContents(event.target.value)であってもmycontentsには直ちに値が入力されないため、onChangeContents関数が終了すると、入力された値はmycontentsに適用され、mycontentsに入力された値は反映されない.
    したがって
    	if(mywriter !== "" && mytitle !== "" && mycontents !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )
    部分は関数が終わるまで保持されます.
    これはstateの再描画機能で、レンダリングと呼ばれているからです.
    	const onChangeContents = (event) =>{
        setMyContents(event.target.value)

        if(mywriter !== "" && mytitle !== "" && event.target.value !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )
    }
    コードを書き直すと、mycontentsは位置の値ではありません.event.target.valueは、現在入力されている値を直接取得するため、直ちに業績を達成することができる.
    • LeetCode String to Integer (atoi)
    [C++]白準1012:有機白菜