Reactの本質とuseState

12508 ワード
JavaScript React テキストリンク
99%が反応に入る人は、以下の現象に困惑することを保証します.
const Counter = () => {
	let counter = 0
    return <button onClick={() => counter++}>{counter}</button>
}
ボタンを押したのになぜ画面にカウンターがないのですか?
なぜ上の状況でボタンを押すとカウンターが上がらないのか知っていますか?
useStateを使えばいいのは知っていますが、なぜuseStateを使うのか知っている人は多くありません.
では、本質的に反応はどのように操作されているのでしょうか.
/* html */
<body>
  <div id="app"></div>
</body>

/* js */
const $app = document.getElementById("app");
const jsx = <div>안녕하세요</div>;
ReactDom.render(jsx, $app);
JSX.Elementを受信して純粋なHtmlElementに分割し、特定のHtmlElementを指定します.
このHtmlElementの下にあるパーティション値をレンダリングします(<div>안녕하세요</div>).
理解を助けるためにバニラJSとして以下に示す.
const $app = document.getElementById("app");
const $divElement = doucment.createElement("div");
$divElement.innerText = "안녕하세요";
$app.appendChild($divElement);
本題に戻り、次のコードを実行すると何が起こるのでしょうか.
const $app = document.getElementById("app");
let jsx = <div>안녕하세요</div>;
ReactDom.render(jsx, $app);
setTimeout(() => {
  jsx = <div>반갑습니다</div>;
}, 3000); // 3초후에 jsx의 값을 <div>반갑습니다</div>로 바꾼다
正解は画面に表示されているテキスト「こんにちは」が「お会いできて嬉しいです」にならないことです.理由は、書き込みを開始したときに聞いたカウンタの例と同じです.
なぜなら
ReactDom.新しいrender()が呼び出されていないので!
const $app = document.getElementById("app");
let jsx = <div>안녕하세요</div>;
ReactDom.render(jsx, $app);
setTimeout(() => {
  jsx = <div>반갑습니다</div>; // jsx의 값을 <div>반갑습니다</div>로 바꾼다
  ReactDom.render(jsx, $app); // 바꾼 값을 $app 아래에 다시 적용시킨다.
}, 3000);
タイムアウトコールバックでRealtDom.render()を再度呼び出すと、画面上のテキストが「ようこそ」に変わります.
では、最初のカウンタの例に適用すると...
const Counter = () => {
	let counter = 0
    return <button onClick={() => counter++}>{counter}</button>
}
どうやってここで応用するのではないでしょうか.
ReactDom.どうやってRenderを適用すればいいか分かりませんか?
私たちはここでRealtDomです実際にRender関数をインポートする必要はありません.
const Counter = () => {
  	const [counter,setCounter] = useState(0);
    return <button onClick={() => setCounter(prev => prev+1)}>{counter}</button>;
}
const $app = document.getElementById("app");
ReactDom.render(<Clicker />, $app);
userStateは、値配列のsetState(ここではsetCounter)関数を返し、関数の実行時に内部でReactDomを実行します.Renderを呼びます.
カウンタの状態値が変化するたびに、すなわちsetStateが呼び出されるたびにReactDomが呼び出される.Render関数も一緒に呼び出されるので、ボタンをクリックするとカウンタが上昇するのを見ることができます.
要約すると...
初めてCounterの例でボタンをクリックしたとき、カウンタが上昇しない理由は簡単です.
本物のHtmlElementに触ったことがないからです.
JSXElementを対象とした、ReactDom.レンダーを使用して実際のHtmlElementに分割し、DOMをレンダリングして画面の値が変化することを確認します.
MySQL:insertプライマリ・キーが重複している場合update
[解決済み]DatabindingとRecycleViewの使用時にインタフェースが点滅し、プロジェクトステータスの更新が混乱する