Reactトピック:可変属性

本文は『horseshoe・React特集』シリーズの文章の一つで、後続にはもっと多くの特集が発売される.
私のGitHub repoに来て完全なテーマの文章を読みます
私の個人ブログに来て比類のない読書体験を得る
Reactは状態同期を解決するために使用されるが、this.stateと並ぶ概念がある.
これがthis.propsです.this.propsは、コンポーネント間のコミュニケーションのインタフェースである.
原則として親コンポーネントから子コンポーネントにしか流れませんが、開発者には様々なhackテクニックがあり、基本的に近親間のコミュニケーションは問題ありません.
this.props this.propsは極めて簡単なインタフェースです.世界にはもっとバカなインタフェースが必要だ
HTMLタグの属性を書くように書くだけで、サブコンポーネントのthis.propsに伝わります.
しかし、いくつかの点に注意する必要があります.

には、2つの特殊な属性refおよびkeyがあり、それらはそれぞれ用途があり、サブアセンブリのthis.propsには伝達されない.

属性のみに値を与えない場合、Reactはデフォルトでブール値trueに解析されます.

文字列以外の値は括弧で囲まれています.

サブコンポーネントではなくラベルに属性を与えた場合、Reactは解析されません.

import React, { Component, createRef } from 'react';
import Child from './Child';

class App extends Component {
    isPopular = false;
    refNode = createRef();
    
    render() {
        return [
            ,
            ,
            ,
        ];
    }
}

export default App;

this.propsは可変オブジェクトです
Reactは関数式プログラミングの思想が濃い.
関数式プログラミングといえば、純粋な関数という概念があります.
純粋な関数にはいくつかの特徴があります.

は、同じ入力を与え、常に同じ出力を返す.

プロセスには副作用はありません.

外部状態に依存しない.

function doSomething(a, b) {
    return a + b;
}

これはプログラミング思想です.この概念が少し曖昧であれば、例を挙げてみましょう.
あなたの父を殺した敵が10年後に突然現れたので、あなたは冷たい殺し屋を雇って彼を解決することにしました.
どんな殺し屋を探してるの?

はいくらで何をするか、効果は予想され、手を失ったことがない.

民を誤って傷つけず、動静を引き起こさない.

はグループがなく、単独で事件を起こし、きれいで、口を閉じやすい.

もしあなたが父の仇を殺す覚悟があれば、純関数はあなたの袋の中のものです.
なぜ関数を精製するのですか?this.propsは純関数の思想を汲み取ったからだ.
その最大の特徴は可変ではないことです.this.stateとは違って、this.propsが来たのは本当です.this.stateも開発者が直接属性を変えることに反対しているが、結局は口で言うだけで、開発者自身の制約に頼らなければならない.しかし、this.propsは直接あなたのプログラムをクラッシュさせます.
Reactを加えてもthis.setPropsメソッドはないので,開発者の自己制約は不要であり,this.propsは可変である.
コミュニケーションは基本的にほえる
親コンポーネントが子コンポーネントに値を渡す
これは言うまでもなく、最も直感的な価値伝達方式です.

import React from 'react';
import Child from './Child';

const App = () => {
    return (
        <Child star={1000} />
    );
}

export default App;

子コンポーネントが親コンポーネントに値を渡す
実はコールバック関数のパラメータを利用して値を伝達します.
親コンポーネントは、propsを介してサブコンポーネントにメソッドを渡す方法を定義し、サブコンポーネントが親コンポーネントに値を渡す必要がある場合に、このメソッドを実行します.メソッド定義が親コンポーネントにあるため、親コンポーネントはこの値を受信できます.

import React, { Component } from 'react';
import Child from './Child';

class App extends Component {
    state = { value: '' };
    
    render() {
        return (
            <Child handleSomething={this.handleSomething} />
        );
    }
    
    handleSomething = (e) => {
        this.setState({ value: e.target.value });
    }
}

export default App;

import React from 'react';

const Child = (props) => {
    return (
        <input type="text" onChange={props.handleSomething} />
    );
}

export default Child;

兄弟コンポーネント間で値を渡す
原理はコールバック関数と同じですが、ここでは親コンポーネントは橋渡しにすぎません.
親コンポーネントがコールバック関数の値を受信すると、this.setStateによって値が保存され、別のサブコンポーネントの再レンダリングがトリガーされ、再レンダリング後に別のサブコンポーネントがこの値を得ることができます.

import React, { Component, Fragment } from 'react';
import ChildA from './ChildA';
import ChildB from './ChildB';

class App extends Component {
    state = { value: '' };
    
    render() {
        return (
            
                
                
            
        );
    }
    
    handleSomething = (e) => {
        this.setState({ value: e.target.value });
    }
}

export default App;

import React from 'react';

const ChildA = (props) => {
    return (
        <input type="text" onChange={props.handleSomething} />
    );
}

export default ChildA;

import React from 'react';

const ChildB = (props) => {
    return (
        <div>{props.value}div>
    );
}

export default ChildB;

createContext
?これはReact v 16です.3.0リリースのAPI.
Reactは開発者にContextオブジェクトである転送ゲートを提供した.
厳密に言えば、ContextはとっくにReactに存在していたが、これまで正式なAPIではなかった.
ついにv 16.3.0が修正されました.
なぜContextは転送ドアなのか?コンポーネント間でデータを転送できるからです.親子の間の小騒ぎではなく、任意のレベルにまたがることができます.しかし、後述する一方向データストリームのため、データは下にしか伝達できないという制限があります.
開発者はcreateContextによってコンテキストオブジェクトを作成し(Reactは特にcreateが好き)、Providerとしてトップクラスのコンポーネントを探します.次に、任意の下位コンポーネントで提供されたデータを消費することができます.

Providerのデータが変更されると、Consumerの更新がトリガーされます.

は、作成時にデフォルト値を指定し、マウント時にvalueプロパティでデータを渡すことができます.ただし、デフォルト値はProviderが指定されていない場合にのみ有効です.

開発者は、複数のContextを作成することができる.

Consumerのchildrenは関数でなければなりません.

古いContextでは、受信コンポーネントのshouldComponentUpdateライフサイクルフックがfalseに戻ると、this.propsのレベル1を介して転送されるため、Contextのデータは受信されません.
新しいContextはサブスクリプション・パブリケーション・モードを採用しているので、この問題はありません.
実際react-reduxライブラリのProviderコンポーネントの内部には古いContext APIが使用されていますが、reduxはいくつかの最適化を行いました.

import { createContext } from 'react';

const { Provider, Consumer } = createContext({ lang: 'en' });

export { Provider, Consumer };

import React, { Component } from 'react';
import { Provider } from './context';
import Todos from './Todos';

const App = () => {
    return (
        <Provider value={{ lang: 'zh' }}>
            <Todos />
        Provider>
    );
}

export default App;

import React, { Fragment } from 'react';
import TodoItem from './TodoItem';

const Todos = () => {
    return (
        <Fragment>
            <TodoItem />
            <TodoItem />
            <TodoItem />
        Fragment>
    );
}

export default Todos;

import React from 'react';
import { Consumer } from './context';

const TodoItem = () => {
    return (
        <Consumer>
            {({ lang }) => <div>{lang === 'en' ? 'todo' : '  '}div>}
        Consumer>
    );
}

export default TodoItem;

たんほうこうデータストリーム
水が低いところへ流れるのは自然の法則だ.
Reactは、ステータスを記述することによってUIの表現を制御し、UIの更新メカニズムに関連する.
ステータスは内部ステータスに加えて、コンポーネント間で共有されるステータスがあるに違いありません.そのため、1つのコンポーネントのステータスが更新されると、多くのコンポーネントの更新につながる可能性があります.フレームワークの更新メカニズムは非常に複雑になります.
しかし、水のイメージに戻ると、状態の流れが一方向で、上から下へ流れると、直感によく合って、更新メカニズムは極めて簡単になります.私が更新すれば、私のすべての部下も更新します.
これがthis.propsの思想の源である.
propsと呼ばれていますが、ステータスであり、共有されたステータスにすぎません.
上から下へしか流れません
内部は変更できません.
あるpropsのソースが更新されると、開発者が手動で禁止しない限り、流れるすべてのコンポーネントが更新されます.
脈絡がはっきりしていて、this.propsこそReactに血液を与えたものです.
Reactがフォームの双方向データバインドを放棄した問題については、一方向データストリームをより徹底的にしたいだけです.実際には、フォームのステータスは、単一のデータ・ストリームとは無関係に、コンポーネント内部のステータスです.
双方向データバインドとは?フォーム入力とは、バインドされた変数が入力された値を自動的に取得し、変数の値が変更され、バインドされたフォームの値が変更され、両方のフローが自動的にバインドされます.
しかし、実際には双方向データバインディングはvalueの一方向バインディング加onChangeイベントの傍受ではないでしょうか.Reactも2ステップでできます.
まとめ:双方向データバインディングは一方向データストリームに影響を及ぼさず、Reactは双方向の同期を実現することもできる.
React特集一覧
UIとは
JSX
かへんじょうたい
可変属性
ライフサイクル
コンポーネント
≪イベント｜Events｜ldap≫
操作DOM
抽象UI