再レンダリング
再レンダリングはまずいつ起こるかについてです。
1.stateが更新された時
2.propsが更新された時
3.親コンポーネントが再レンダリングされた時
みたいです。
App.jsx
import React, { useState } from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";
const App = () => {
//Appはこの中でしか使えない
const [count, setCount] = useState(0); //[]で配列の分割代入 1つ目はstateとして使う変数名 2つ目はそのstateを変更するための関数 0で初期値を設定
const [smileFace, setSmileFace] = useState(true); //smileの関数 レンダリングの処理
const clickPlus = () => {
//setCount(100); //プラスボタンを押すと100になる
setCount(count + 1); //プラスボタンを押すと+1
};
const clickSwitchSmileFace = () => {
setSmileFace(!smileFace);
};
return (
<>
<h1 style={{ color: "blue" }}>React入門</h1>
<ColorMessage color="green">基礎をやりましょう</ColorMessage>
<ColorMessage color="orange">基礎は大事</ColorMessage>
{/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
<button onClick={clickPlus}>プラスボタン</button>
<br />
<button onClick={clickSwitchSmileFace}>on/off</button>
<p>{count}</p>
{smileFace && <p>(￣∇￣)</p>}
</>
);
};
export default App; //Appを他でも使える
ColorMessage.jsx
import React from "react";
const ColorMessage = (props) => {
//onsole.log("カラー");
const { color, children } = props;
const contentStyle = {
color, //color: color,を省略
fontSize: "20px",
fontWeight: "30px"
};
return <p style={contentStyle}>{children}</p>; //propsを渡す
};
export default ColorMessage;
これでon/offボタンを押すと(￣∇￣)が表示されたりされなかったりします。
なぜ再読み込みしなくても
<p>{count}</p>
{smileFace && <p>(￣∇￣)</p>}
の値が変わるのかというとコンポーネントがサイレンダリングされているからです。
次はカウントが５の倍数になったら笑顔マークが出る処理にしていきます。
App.jsx
import React, { useState } from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";
const App = () => {
console.log("テスト");
//Appはこの中でしか使えない
//const clickButton = () => alert();
const [count, setCount] = useState(0); //[]で配列の分割代入 1つ目はstateとして使う変数名 2つ目はそのstateを変更するための関数 0で初期値を設定
const [smileFace, setSmileFace] = useState(false); //smileの関数 レンダリングの処理
const clickPlus = () => {
//setCount(100); //プラスボタンを押すと100になる
setCount(count + 1); //プラスボタンを押すと+1
};
const clickSwitchSmileFace = () => {
setSmileFace(!smileFace);
};
if (count > 0) {
if (count % 5 === 0) {
smileFace || setSmileFace(true);
} else {
smileFace && setSmileFace(false);
}
}
return (
<>
<h1 style={{ color: "blue" }}>React入門</h1>
<ColorMessage color="green">基礎をやりましょう</ColorMessage>
<ColorMessage color="orange">基礎は大事</ColorMessage>
{/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
<button onClick={clickPlus}>プラスボタン</button>
<br />
<button onClick={clickSwitchSmileFace}>on/off</button>
<p>{count}</p>
{smileFace && <p>(￣∇￣)</p>}
<li>HTML CSS</li>
<li>JavaScript</li>
</>
);
};
export default App; //Appを他でも使える
しかしstateなどが多くなってくると動かなくなってくることはあります。
useEffect
useEffectに渡された関数はレンダーの結果が画面に反映された後に動作します。
関数の実行タイミングをReactのレンダリング後まで遅らせます。
useEffect(() => {
/* 第1引数には実行させたい副作用関数を記述*/
console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述
App.jsx
/*eslint react-hooks/exhaustive-deps: off */ //eslintをoffにする
import React, { useEffect, useState } from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";
const App = () => {
console.log("テスト");
//Appはこの中でしか使えない
//const clickButton = () => alert();
const [count, setCount] = useState(0); //[]で配列の分割代入 1つ目はstateとして使う変数名 2つ目はそのstateを変更するための関数 0で初期値を設定
const [smileFace, setSmileFace] = useState(false); //smileの関数 レンダリングの処理
const clickPlus = () => {
//setCount(100); //プラスボタンを押すと100になる
setCount(count + 1); //プラスボタンを押すと+1
};
const clickSwitchSmileFace = () => {
setSmileFace(!smileFace);
};
// useEffect(() => {
// console.log("effect");
// }, [count]); //[]のように配列が空の場合は最初の処理だけが実行される ここではテスト
useEffect(() => {
if (count > 0) {
if (count % 5 === 0) {
smileFace || setSmileFace(true);
} else {
smileFace && setSmileFace(false);
}
}
}, [count]);
//[count,,smileFace]でも可
return (
<>
<h1 style={{ color: "blue" }}>React入門</h1>
<ColorMessage color="green">基礎をやりましょう</ColorMessage>
<ColorMessage color="orange">基礎は大事</ColorMessage>
{/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
<button onClick={clickPlus}>プラスボタン</button>
<br />
<button onClick={clickSwitchSmileFace}>on/off</button>
<p>{count}</p>
{smileFace && <p>(￣∇￣)</p>}
<li>HTML CSS</li>
<li>JavaScript</li>
</>
);
};
export default App; //Appを他でも使える
ColorMessage.jsx
import React from "react";
const ColorMessage = (props) => {
//console.log("カラー");
const { color, children } = props;
const contentStyle = {
color, //color: color,を省略
fontSize: "20px",
fontWeight: "30px"
};
return <p style={contentStyle}>{children}</p>; //propsを渡す
};
export default ColorMessage;
index.js
import React from "react"; //Reactをインポート
import ReactDom from "react-dom"; //React-domをインポート
import App from "./App"; //App.jsからimport
//React開発の基盤作り
ReactDom.render(<App />, document.getElementById("root")); //レンダリング //rootはindex.htmlの<div id="root"></div>
資料