USENTフック
何が反応フックですか?
反応フックは、機能的なコンポーネントの状態とライフサイクルメソッドを使用できる組み込み関数です.
フックの規則
useから始まるUSENT基本
useStateは、状態を機能的なコンポーネントに加えるのを可能にします.これは、値(初期状態)を取ることができます(配列、オブジェクト、文字列、Booleanなど)、現在の状態と状態を更新する関数からなる配列を返します.
One important thing to remember is the update function doesn't update the state right away.
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState(0);
return (
<div className="App">
<h1>Counter: {value}</h1>
<button>Increment</button>
</div>
);
};
export default App;
状態の更新
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState(0)
return (
<div className="App">
<h1>Counter: {value}</h1>
<button onClick={(() => setValue(value + 1))}>
Increment
</button>
</div>
);
}
export default App;
クリックした後、しばらくインクリメントを遅延させる
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState(0)
const complexIncrease = () => {
setTimeout(() => {
setValue(value + 1)
}, 2000)
}
return (
<div className="App">
<h1>Counter: {value}</h1>
<button onClick={(() => setValue(value + 1))}>
Increment
</button>
<button onClick={complexIncrease}>
Complex Increase
</button>
</div>
);
}
export default App;
機能的な更新
useState((previousstate) ⇒ {
// Always return something
// change previous state
return new state
})
import React, { useState } from "react";
const App = () => {
const [value, setValue] = useState(0)
const complexIncrease = () => {
setTimeout(() => {
setValue((prev) => prev + 1)
}, 2000)
}
return (
<div className="App">
<h1>Counter: {value}</h1>
<button onClick={(() => setValue(value + 1))}>
Increment
</button>
<button onClick={complexIncrease}>
Complex Increase
</button>
</div>
);
}
export default App;
Reference
この問題について(USENTフック), 我々は、より多くの情報をここで見つけました https://dev.to/harsha/usestate-hook-4mh7テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol