2022.01.29

01.Basic Hooks (I)
クラス構成部品でのみstateを使用し、関数構成部品でライフサイクルの使用可能な部分を有効にします.
ステータスロジックの再使用を許可
useStateの使用
stateを置き換えることができます
(1)class素子にstateを使用する
import React from "react";
export default class Example1 extends React.Component {
state = {
count: 0,
};
render() {
const { count } = this.state;

return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={this.click}>Click me!</button>
  </div>
);

}
click = () => {
this.setState({ count: this.state.count + 1 });
};
}
(2)関数素子でのusStateの使用
import React from "react";
export default function Example2() {
const [count, setCount] = React.useState(0);
return (

<div>
  <p>You clicked {count} times</p>
  <button onClick={click}>Click me!</button>
</div>

);
function click() {
setCount(count + 1);
}
}
=>useState関数構成部品の特定の値をstateとして使用
(3)stateオブジェクトの使用
import React from "react";
export default function Example2() {
const [state, setState] = React.useState({ count: 0 });
return (

<div>
  <p>You clicked {state.count} times</p>
  <button onClick={click}>Click me!</button>
</div>

);
function click() {
setState((state) => {
return {
count: state.count + 1,
};
});
}
}
02.Basic Hooks (II)
useEffect
ライフサイクルフックを置き換えることができます
componentDidMount
componentDidUpdate
componentWillUnmount
(1)class素子における光源周期の使用
import React from "react";
export default class Example4 extends React.Component {
state = {
count: 0,
};
render() {
const { count } = this.state;

return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={this.click}>Click me!</button>
  </div>
);

}
componentDidMount() {
console.log("componentDidMount", this.state.count);
}
componentDidUpdate() {
console.log("componentDidUpdate", this.state.count);
}
click = () => {
this.setState({ count: this.state.count + 1 });
};
}
(2)関数素子におけるuserEffectとしてのライフサイクルの使用
import React from "react";
export default function Example5() {
const [count, setCount] = React.useState(0);
//componentDidMount
React.useEffect(() => {
console.log("componentDidMount");
}, []);
//componentDidMount & componentDidUpdate
React.useEffect(() => {
console.log("componentDidMount & componentDidUpdate by count", count);
}, [count]);
//componentWillUnmount
React.useEffect(() => {
console.log("componentDidMount & componentDidUpdate by count", count);

return () => {
  // cleanUp
  console.log("cleanup by count", count);
};

}, [count]);
return (

<div>
  <p>You clicked {count} times</p>
  <button onClick={click}>Click me!</button>
</div>

);
function click() {
setCount(count + 1);
}
}
=>useEffectは2つのタスクを完了します.
componentDidMount
componentDidUpdate
=>userEffectは複数利用可能(順次実行)
=>関数の後にパラメータを渡すと、そのパラメータがロードされると、関数は実行されません.
=>useEffectにreturnを追加すると、componentWillUnmount操作が実行されます.
再読み込み前にreturnを実行
cleanup