CRUD

最初の

イベントと構成部品

イベントに基づいて対応するイベントを作成して、構成部品をロードします.

パターンに従ってロードされるため、ReadControlというコンポーネントが個別に作成されます.
要素自体を変数に配置し、readおよびwelcomeモードでのみ、要素を導出することができる.

新しい要素を追加するイベント

Create

CRUDのcreate、update、deleteボタンを作成し、それに関連するコンポーネントControl.jsを作成します.onChangeMode関数によって、各機能の値はmodeに変更されます.

submitにより、イベントオブジェクトeにデバッグを行い、e.target.title.value、e.target.desc.valueにそれぞれ入力された値を得た.

CreateContentコンポーネントに変更され、それぞれの値が見つかりました.

Push VS concat

pushは元のデータ自体を変更します.
concatは、元のデータを変更せずに新しい配列を返します.
createの場合はpushを避けます.

どうしたんですか.
範囲が広がると思うと

TOCとはまったく関係のない構成部品をクリックするとTOC->もレンダリングされますふような仕事
では、選択的にレンダリングできますか?shouldComponentUpdateであってもよい.

shouldComponentUpdate

この関数でreturn値をfalseに設定した場合、renderは呼び出されません.
パラメータは2種類あげられます.shouldComponentUpdate(newProps, newState)各Props変更時の値、State変更時の値.

shouldComponentUpdate(newProps, newState) {
    console.log(
      "===> TOC render shouldComponentUpdate",
      newProps.data,
      this.props.data
    )
  return false;
}

newPropsで変更した値を知ることができます.
this.props.データは現在の値を知ることができます.
TOCに入力したデータのprops値が変化した場合は、レンダリングしないでください.

shouldComponentUpdate(newProps, newState) {
    console.log(
      "===> TOC render shouldComponentUpdate",
      newProps.data,
      this.props.data
    )

    if (this.props.data === newProps.data) {
      return false
    }

    return true
  }

pushを使用してpropsを追加すると、ソースファイル自体が変更されるため、選択的にレンダリングできません.

Immutable

原本は交換しない.

整列

アレイはアレイをコピーします.from()

var a = [1,2,3];
var b = Array.from(a);
a === b
---------> FALSE

内容は同じですが、全く異なる配列です.住所が違うので(?)

オブジェクト

オブジェクトオブジェクトをコピーします.assign()

Var a = {name:’Kim’}
Object.assign({},a);

var a = {name:'kim'}
var b = Object.assign({},a)
a === b
---------> false

b.name = 'lee'
"lee"
console.log(a,b)
 {name: "kim"} {name: "lee"}

var b = Object.assign({left: 1, right: 2},a)
b
{left: 1, right: 2, name: "kim"}

コンテンツは同じですが、まったく異なるオブジェクトです.
注意!
Push,concat,...これらを覚えながら、オリジナルの不変性に注意してください.これを実現するのに役立つライブラリは可変ではありません.js
Immutable.jsライブラリを使用すると、無条件にコピーして使用するため、不変性を維持できます.