React

なぜ反応を書くのですか?

1.ReactはコンポーネントベースUIライブラリ

重複コードのコンポーネント化:複数回作業するコンテンツを1つのコンポーネントに印刷すると、コンテンツが減少します。

2.宣言式プログラミング

<h2 id='result'>0</h2>
<button onclick='plus()'>Plus</button>

function plus() {
	const result = document.getElementById('result');
  	const num = parseInt(result.innerText, 10);
  	result.innerHTML = num + 1
}
// 버튼을 클릭하면 plus()가 실행된다
// result를 표시해 줄 요소를 가져온다
// 가져온 결과값을 10진수의 숫자로 변환하여 num에 담는다
// result에 num + 1해준 값을 넣어준다

function App() {
  const [num, setNum] = useState(0);
  return (
    <div className="App">
      <h2>{num}</h2>
      <button onClick={() => setNum(num + 1)}>Plus</button>
    </div>
  );
}
/// plus를 누르면 num값에 +1을 한다

3. VirtualDOM

DOM：ブラウザが実際に使用するオブジェクト（Document Object Model）

ブラウザレンダーパス

反応器の仮想DOMは？

仮想DOMを使用して、要素を追加するときに仮想DOMを使用して更新します.仮想DOMを使用して更新するのではなく、完了したときに実際に表示されているDOMを一度に更新します.
(state Change -> Conpute Diff -> Re-render)