デフォルトCRUD

1946 ワード

生活コード React FE テキストリンク

CRUD
Create, Read, Update, Delete
concat, push

pushはarr[]というソースファイルを更新することによってソースファイルを変形する.でもsetStateは元のものを置き換えます!!また、パフォーマンスの面では非常に厄介です.
すなわち,状態変化前(props=>arr)とその後の値(newProps=>arr)は同じである.

ですが、concatはresult=arr.concat(3)によって別の配列を作成し、arrと呼ばれる配列はその内容を変更せず、3という要素を追加した結果です.
ステータスが変更される前(props=>arr)とその後の値(newProps=>result)は異なります.

shouldComponentUpdate

shouldComponentUpdate(newProps, newState) {
        if (this.props.data === newProps.data)
            return false;
        return true;
    }

でレンダリングする前にshouldComponentUpdateを実行します.

return falseの場合、renderは呼び出されません.

shouldComponentUpdateには、新しく変更された値(newProps,newState)と以前に使用された値(this.props.プロパティ)が表示されます.

不変

var newContent = Array.from(this.state.Content)

解決を通す.現在のステータスのコンテンツを取得し、newContentに入れます.

newContent.push({ id: this.max_content_id, title: _title, desc: _desc });

コードpushによるソースコードの不変性の維持

var a = {name: 'egoing'}
var b = Object.assign({}, a);

Object.配分でもいいです.パラメータは何も追加できません.ただし、{left:1,right:2}を入れると、b={left:1,right:2,name:"egoring"}となります.
入力した入力を更新
属性

を「取得するtitle」と指定し、value={this.state.title}で値

をロードします.

の値を変更しても状態は変化せず、変更の根拠はありません.変更すると、inputとstateの接続が中断していると考えられます.つまり、制御されない.

したがって、onChange()、setStateでステータスを変更できます.

はまた、[e.target.name]を使用して、コード再構成の既存の値に対応する属性をロードすることもできる.

関数の後にbind(this)を付けるのは面倒なので、構造関数には

が必要です.

this.inputFormHandler = this.inputFormHandler.bind(this);

貼り付け
Delete

if (_contents[i].id === this.selected_content_id) {
                  _contents.splice(i, 1);
                  break;
                }

<クリップで削除します.1番目のパラメータは対応するインデックスを表し、2番目のパラメータは削除する数を表し、インデックスを含む.
<オリジナルを変更し、変更しません.

この問題について(デフォルトCRUD), 我々は、より多くの情報をここで見つけました https://velog.io/@kingyong9169/CRUD

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol