データ結合

2018年、私は、その時点で、私はいくつかのPythonコード、特にdjangoをコーディングしていることを覚えて、私はすでにいくつかのプロジェクトを行った.そして、その時、私が知っている唯一の言語は、Pythonでした.
私はHTMLとCSSを少し知っています.どこからともなく、ちょうど私がPythonの禅に追いつくことができないと言いましょう、そして、私はすべてのこれらのテンプレート、モデルとDjangoですべてが好きです、私はA *で本当の痛みを感じています.
それで、私はPythonから逃げて、私の兄に尋ねました.要するに、彼はJavaScriptを学ぶべきだと私に言いました.
私はPythonからJavaScriptに移動し始め、私はそれを愛し始めた.それから、私は反応を見つけました.そして、反応の生態系への私の旅行が反応するネイティブで始まったと言うのは、おかしいです.私がネイティブの反応を始めたとき、バックエンド開発者として私を
Jjangoから来て、個人的に私は本当に楽しんで、どのように反応ネイティブのデータバインドは簡単です.それを信じていないかどうか私はコードをネイティブ242479152ウェブサイトを見ずに約5ヶ月間反応します.私はそれについて考えるたびに、私はとても悪いと恥を感じた.
私は自分自身の開発者としてCSのバックグラウンドでは、私はこれらのプログラミング技術に始めた方法はかなり簡単です、私はYouTubeに行く.それで、それはドキュメンテーションとyoutubeからのチュートリアルのトンですが、私はネイティブに反応しました.
しかし、1つのことは、以前はテンプレートで働いた

everytimes I change something the UI just changes

データバインディングは、任意の可能なソースからデータを結合してUIと同期する一般的なテクニックです.我々が反応について何かを話す前に、Venilla方法から始めましょう.
UIを使ってデータを同期させるには、データモデルの変更を観測する必要があるかどうかを知る必要があります.
this

class Binder {
    constructor(value) {
        this.observers = [];
        this.value = value;
    }
    notify() {
        this.observers.forEach(listener => listener(this.value));
    }
    listen(listener) {
        this.observers.push(listener);
    }
    get value() {
        return this.value;
    }
    set value(value) {
        if (val !== this.value) {
            this.value = value;
            this.notify();
        }
    }
}

上記のコードでは、簡単なJavaScriptクラスがあります.コンストラクタでは、検出するためのオブザーバの配列を持ちます
我々のデータモデルのメソッドまたはイベントを変更する可能性のあるデータは、値と我々は、任意の変更に対して行動を起こすために我々の観測者を呼び出すセッターを持っています.

    let myName = new Binder("Initial Name");
    let dataUpdater = (newName) => {
        // updater event to change the data model
        console.log('Your coming new Name is ', newName)
    };
    myName.listen(dataUpdater);
    myName.value = 'Arkar Kaung Myat';

イベントリスナーを通してデータソースの更新を受け取るたびに、基本的にNotify関数を呼び出します.つまり、1つの方法でデータバインディングが機能します.
単純なHTMLドームを試してみましょう.

    <div>
        <label for="Number">Enter Number</label><br>
        <input type="number" id="number" placeholder="Enter second Number">
    </div>

    <br>
    <p>Number : </p>
    <h1 id="result"></h1>

let number = document.querySelector('#number');
let result = document.querySelector('#result');

class Binder {
    constructor(value) {
        this.observers = [];
        this.data = value;
    }
    notify() {
        this.observers.forEach(listener => listener(this.data));
    }
    listen(listener) {
        this.observers.push(listener);
    }
    get value() {
        return this.data;
    }
    set value(value) {
        if (value !== this.data) {
            this.data = value;
            this.notify();
        }
    }
}

let num = new Binder(number.value);

let observer = (value) => {
    result.innerText = value;
}

num.listen(observer);
number.addEventListener('input', (e) => {
    num.value = e.target.value;
});

よく、私はそれが少し自己説明的であると思います.

多重データ入力によるデータモデルの結合

上の例はかなり簡単に理解できますし、データのバインド方法についてよく説明できると思います.
それで、我々が我々のデータモデルのために複数のデータ入力を持つと言いましょう.つの入力フォームからデータ入力を更新し、ビューに更新したいとします.どのように、我々はそのような結合をつくりますか?

class WithEffect extends Binder {
    constructor(data,dependencies){
        super(data());
        const listener = () => {
            this.data = data();
            this.notify();
        };
    };

    get value() {
        return this.data;
    };

    set value(val) {
        // just to show you
        console.log(val, 'What do you expect ! is is read-only computed value');
        throw 'is is read-only computed value';
    }
}

レッツシービー

const num1 = new Binder(100);
const num2 = new Binder(900);

let observer = () => {
    return Number(num1.value) + Number(num2.value)
}
const full = new WithEffect(observer, [num1, num2]);
console.log(full.value);

// try full.value = 40000

関数はDOMです

const num1 = new Binder(number1.value);
const num2 = new Binder(number2.value);

let observer = () => {
    result.innerText = `${Number(num1.value) + Number(num2.value)}`;
    return Number(num1.value) + Number(num2.value);
}

const full = new WithEffect(observer, [num1, num2]);

number1.addEventListener('input', () => {
    num1.value = number1.value;
});

number2.addEventListener('input', () => {
    num2.value = number2.value;
});

So as I understand, updaing on the UI is based on the data model.But updating the data model is done explicitly
by some listener or observers through callbacks or events from some possible data source.In our case, the input.

二通りのデータ結合

つの方法の場合、データモデルを更新するたびに、UIを更新する必要があります.他の道も.
UIのチャーミングの場合は、データモデルを更新する必要があります.

    <div>
        <label for="number1">Enter Number1</label><br>
        <input onkeyup="update(event)" type="number" id="number1" placeholder="Enter second Number" data-binder="A">
    </div>
    <br>
    <div>
        <label for="number2">Enter Number2</label><br>
        <input onkeyup="update(event)" type="number" id="number2" placeholder="Enter first Number " data-binder="A">
    </div>

上記の例では、各入力についてオブザーバーを得た.

let binded_inputs = document.querySelectorAll('[data-binder="number"]');

function update(event) {
    for (var i in binded_inputs) {
        binded_inputs[i].value = event.currentTarget.value;
    }
}

どのような反応で！

反応して、それが実装されることができるとしても、双方向データ結合のために本当に決して設計されません
だからいくつかの反応コードを見てみましょう.

   const [message, setMessage] = useState('Hello World');

それで、我々は我々の見解のためにデータモデルまたは州を得ました、そして、我々は我々の見解とこの場合、我々の州の間で同期したいです.

function App() {
  const [message, setMessage] = useState('Hell`o World');

  let handleChange = (e) => {
    setMessage(e.target.value)
  }
  return (
    <div className="App">
      <input type="text" value={message} onChange={handleChange} />
      <br>
      <h1>{message}</h1>
    </div>
  );
}

入力を入力するたびに、我々の日モデルを更新するためにコールバックハンドラーを呼び出しています.
したがって、ビューまたはデータソースからデータモデルを変更することができますが、我々は直接それを行うことはできませんが、我々はイベントやハンドラを添付することができます
ビューを変更し、モデルを更新します.
反応を見てみましょう.

    let myApp = document.getElementById('root');
    ReactDOM.render(<h1>Welcome to React</h1>, myApp);

基本的に見出しをレンダリングし、いくつかのデータを置くことができます.

let myApp = document.getElementById('root');
let number = 0;

let handleClick = () => {
  number++;
  console.log(number)
};

let content = (
  <div>
    <h1>Welcome to React</h1>
    <p>Here is the number</p>
    <h1>{number}</h1>

    <br />
    <button onClick={handleClick}>ADD</button>
  </div>
)
ReactDOM.render(content, myApp);

これを試してみると、コンソールを参照してください.
我々はデータソースといくつかのデータを得た.
以下のようにコードを変更しようとすると、Diffreenceが表示されます

let myApp = document.getElementById('root');
let number = 0;

let handleClick = () => {
  number++;
  console.log(number)
  renderContent()
};

let renderContent = () => {
  let content = (
    <div>
      <h1>Welcome to React</h1>
      <p>Here is the number</p>
      <h1>{number}</h1>

      <br />
      <button onClick={handleClick}>ADD</button>
    </div>
  );
  ReactDOM.render(content, myApp);
};
renderContent()

だからここで私たちはコンテンツをRenderContentのfuntionのように基本的に置く
毎回、我々はRenderContent関数を呼び出していると我々のコンテンツの新しい更新されたインスタンスを作成しているボタンをクリックします.
クリックして、私たちの要素を検査し、H 1だけを参照することができますスプラッシュ毎回我々がクリックしてボタンをクリックしている.