まず、フックとは何かを紹介しましょう
フックはReact16.8の新機能です。これは、機能コンポーネントで特別に使用されます。クラスコンポーネントでの反応の他の機能を置き換えることができ、実際の作業で一般的に使用されます。
開発にフックが推奨されるのはなぜですか？
フックは、機能コンポーネントの開発に特に使用されます。これは、クラスコンポーネントのライフサイクルの一部を置き換え、これによって引き起こされる多くの混乱を回避するために使用できます。したがって、フックは開発が容易で、開発者がコードを理解しやすくなります。
上記は個人の簡単な要約です。その他の理由については、reactの公式ウェブサイトを参照してください：react.docschina.org/docs/hooks-…
useState
コード内：
React.useState（0）は、クラスコンポーネントのthis.stateにプロパティ値を追加することと同じです。
variableは、クラスコンポーネントのthis.state.variableの値と同等です。
setVariableを使用して、変数の値を変更できます。これは、クラスコンポーネントのthis.setStateと同等です。
import React,(useState) from 'react'
export default function useState_Demo() {
const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
function changeVariable(){
setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
}
render (
<div>
<button onclick = {change}>点我会使variable+1</button>
</div>
)
}
复制代码useEffect
コード内：
次のコードに示されているように、useEffectの使用は、クラスコンポーネントのcomponentDidMoun、componentDidUpdate、およびcomponentWillUnmountの使用を置き換えます。
import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
useEffect(() => {
//这个return是在该组件监测的数据变化时或者被卸载时调用的，被卸载时调用可以相当于componentWillUnmount钩子
return () => {
console.log('该组件被卸载了')
}
}, [variable])//第二个参数传了[variable]，表示检测variable的更新变化，一旦variable变化就会再次执行useEffect的回调
//第二个参数传了[],表示谁都不检测只执行一次useEffect的回调，相当于componentDidMount钩子
//第二个参数不传参，只要该组件有state变化就会执行useEffect的回调，相当于componentDidUpdate钩子
function changeVariable(){
setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
}
render (
<div>
<button onclick = {change}>点我会使variable+1</button>
</div>
)
}
复制代码フックを使用する際の注意点
1.コンポーネント関数の最外層でのみフックを使用し、ループ、条件、またはネストされた関数でフックを呼び出さないでください
import React,(useEffect) from 'react'
export default function useState_Demo() {
//这里才是正确的
useEffect(() => {})
//错误1，使用了条件判断
if(true) {
useEffect(() => {})
}
//错误2，使用了循环
while(true) {
useEffect(() => {})
}
//错误3,使用了嵌套
useEffect(() => {
useEffect(() => {})
})
}
复制代码2.フックはコンポーネントの機能外では使用できません
import React,(useState, useEffect) from 'react'
//错误1，在组件函数外使用了useState
const [variable, setVariable] = useState(0);
//错误2，在组件函数外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
//在组件函数里使用才是正确的
const [variable, setVariable] = useState(0);
}
复制代码3.上記のエラーを回避するために、eslint-plugin-react-hooksESLintプラグインをインストールして、コードのエラーをチェックできます。
カスタムフック
フックは関数です。カスタムフックは、コンポーネント間のロジックの共有を容易にするためのものです。実際には、再利用関数をカプセル化するためのものです。カスタムフックは、reactに付属するフックも呼び出します。名前はuseで始まる必要があります。
//自定义hook
function useHook(initState) {
const [variable, setVariable] = useState(initState)
return variable;
}
//使用自定义hook
export default function useState_Demo() {
const variableState = useHook(0)
}
复制代码疑問に思われるかもしれませんが、複数のコンポーネントで同じフックを使用すると状態が共有されますか？
答えはいいえだ。reactに付属するフックが呼び出されるたびに影響を受けないため、カスタムフックは相互に影響を与えることなく繰り返し呼び出されます。