[TIL] 2020/10/06


Today, I Learned


再学習
  • 宣言型vs命令型(プログラム型):リファレンスサイト2
  • 反応(react)は昨日もまとめられましたが、JavaScriptライブラリで、コンポーネント単位で「ユーザーインタフェース」を管理するのが主な特徴です.また、これらの素子はパッケージのand canが独立して操作されている(韓国語で表現するとパッケージなどの用語が理解できないので、英語で考えましょう).したがって、これらの応答コンポーネントのUI設計により、vanila JSなどの複雑な構成をより簡単にすることができる(宣言型).
  • Reactのいくつかの特徴をまとめ、Reactでは、以前DOMで使用されていたonClickなどの方法を使用する場合、onClickという方法で圧縮を行うべきである(ルールのみ).
  • State in React is for remembering things. また,class component内では,これらの状態をコンストラクション関数内に書き込むこともできるし,ES 7構文を用いて簡単な状態形式で書き込むこともできる.また、stateは、変更時にstate=「something」というように再割り当てすることはできません.setState(関数またはオブジェクト)メソッドを使用して変更する必要があることを覚えておいてください.そのため、stateではpushなどは使用できません.この場合、関数として使用する場合は、オブジェクトをコールバックに戻すだけです.加えて、覚えておいて
    this.setState((state, props) => ({
      counter: state.counter + props.increment
    }));
    もこのように書くことができます.
  • Socrativeエラー回答整理
  • props.childrenを使用する場合、親コンポーネントからコンポーネントまでの値、htmlの場合textContentに属する値を取得できます.
  • propsで複数の変数を受信できます.変数として作成されたpropsオブジェクトの変数をキーとして!
  • なぜJSXを使用するのですか?=>誰が見てももっと直感的だ.
  • DOMと比較
  • REACTはJSXなしではいけませんか?No! React.createElementメソッドで行うことができます.でも、どうしても...?
  • JSXはどのようにコンパイルされていますか?byBabel:react appをより容易に実現するために使用するフェイスブックで提供される「create-act-app」をインストールすると、以前使用していた古い構文(つまり、最新の構文を古い構文にコンパイル)にJSXをコンパイルして使用するbabelが一緒にインストールされます.つまり、翻訳機の役を演じます.
  • を返すと、レンダリング時にアレイに戻り、そのアレイをレンダリングできます.このとき,配列中の各要素をul間でリターンし,たとえばliが集まった配列をul間でリターンすると,liはきれいにul間でchild要素として追加される.これは簡単で、以前のスプレーでmapを使って新しい配列を返すことを考えれば、レンダリングが得られます.
  • React内で2つのhtml(正確にはJSX構文)タグを返してはいけません.DOMで「createdocumentFragment」を使用するように、反応ではdivタグで包むこともできますが、<>で包むこともできます.
  • JSXでは、if文の代わりに3つの演算子を使用する必要があります(すなわち、for文の代わりにmapを使用する必要があります).ただし、JSXのみではif文がダメだとは思わないで、reactの他の関数ではif文は使えません.
  • props独自のルール:propsを処理する関数はすべて「純粋な関数」でなければなりません.つまり、propsは修正できません.propsを使用して新しい値を取得する場合は、sliceまたはconcatまたは[..props,other]として新しい参照値を書き込む必要があります.(**純関数=変更しない関数)
  • Arrayとして返すには、キー値を設定する必要があります.この場合、map関数にキー値を設定する必要があります.すなわち,map関数による配列の作成中に決定しなければならない.この場合、mapメソッドのインデックスパラメータを受け入れず、キー値として使用します.
  • プレゼンテーションでsetStateを使用する場合、StackOverflowエラー=>プレゼンテーションでsetStateを使用しません...理由はたくさん勉強して身につけることです
  • mapメソッドの2番目のパラメータはindex値であり、
  • に注意する.
  • オブジェクトは、展開構文を適用することもできます.例えば、
    const props = {
      name : 'wali',
      age: 30
      }
      <Hello {...props} />
    // 이렇게 하면 Hello component에서
    //props.name 은 'wali'가 되고,
    //props.age 는 30이 됨.
  • が再び強調した反応国規則(?):JSX内で{}を使用してjsコードを使用し、JSX構文でhtmlタグを使用する場合、2つ以上のタグを書く場合は括弧で囲みます.+classで構成部品を作成する場合は、constructor(props){super(props)}シェイプを使用する必要があります.
  • propsを使ってデータを送信し、自分の比喩で表現するとTENETのようになります(自分の比喩を覚えてください).
  • About State and Lifecycle(リファレンスサイト):まず、「ライフサイクル」とは、Reactレンダリング要素の戻り値が人間の誕生のようになることを意味します.
    人のように生きて、最後に人のように死んでしまいます.コンポーネントが消えることを示します(ComponentWillUnmountに関連付けられています).
    この手順では、まずReactDOMで()クロック素子をレンダリングするときに、コンストラクション関数(状態を作成する)、render()メソッド(クラス内)で実行します.
    RealtDOMが実際にレンダリングされると、コンポーネントDidMount関数が実行され、その関数が実行されます.
    そしてずっと生きていく(?)構成部品を削除すると、ComponentWillUnmount関数が実行されます.
    クラスにstateが設定されている場合、state(値)を変更するたびにreactはそれをキャプチャして再表示します().
    したがって、setIntervalをComponentDidMountに設定すると、ステータス値を変更するたびに()が表示され、実際の画面で値が変更されます.
  • setInterval=>clearInterval(?)停止可能
  • 各素子はパッケージ化されているので,互いに状態があるのか無状態なのか分からない.propsで上から下(ツリー構造を考慮)にデータを送信しますが、ステータスはわかりません.