Les deux crochets les plus couramment utilisés dans React

Introduisons d'abord ce qu'est un crochet

Hook est une nouvelle fonctionnalité de React 16.8. Il est spécialement utilisé dans les composants fonctionnels. Il peut remplacer d'autres fonctionnalités de réagir dans les composants de classe et est couramment utilisé dans les travaux pratiques.

Pourquoi les crochets sont-ils recommandés pour le développement ?

Hook est spécialement utilisé pour le développement de composants fonctionnels. Il peut être utilisé pour remplacer certains cycles de vie des composants de classe et éviter beaucoup de confusion causée par cela. Par conséquent, les hooks sont faciles à développer et plus faciles à comprendre pour les développeurs.

Ce qui précède est un bref résumé de l'individu. Pour plus de raisons, veuillez vous référer au site officiel de réaction : react.docschina.org/docs/hooks-…

useState

Dans du code:

React.useState(0) équivaut à ajouter une valeur de propriété à this.state dans le composant de classe

variable est équivalente à la valeur de this.state.variable dans le composant de classe

setVariable peut être utilisé pour modifier la valeur de la variable, qui peut être équivalente à this.setState dans le composant de classe

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>
    )
}
复制代码

utiliserEffet

Dans du code:

Comme on peut le voir dans le code suivant, l'utilisation de useEffect remplace l'utilisation de componentDidMoun, componentDidUpdate et componentWillUnmount dans le composant de classe

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>
    )
}
复制代码

Choses à faire attention lors de l'utilisation de crochets

1. Utilisez uniquement des crochets dans la couche la plus externe des fonctions de composant, n'appelez pas de crochets dans des boucles, des conditions ou des fonctions imbriquées

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //这里才是正确的
   useEffect(() => {})
    
   //错误1，使用了条件判断
   if(true) {
        useEffect(() => {})
   }
   //错误2，使用了循环
   while(true) {
        useEffect(() => {})
   }
  //错误3,使用了嵌套
  useEffect(() => {
      useEffect(() => {})
  })
}
复制代码

2. Le crochet ne peut pas être utilisé en dehors de la fonction du composant

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. Afin d'éviter les erreurs ci-dessus, vous pouvez installer le eslint-plugin-react-hooksplugin ESLint pour vérifier les erreurs dans le code

crochet personnalisé

Un hook est une fonction. Un hook personnalisé sert à faciliter le partage de la logique entre les composants. En fait, il sert à encapsuler la fonction de réutilisation. Le hook personnalisé appelle également le hook fourni avec react. Le nom doit commencer par use

//自定义hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自定义hook
export default function useState_Demo() {
    const variableState = useHook(0)
}
复制代码

Vous vous demandez peut-être si l'utilisation du même crochet dans plusieurs composants partage l'état ?

La réponse est non. Parce que chaque fois que le hook fourni avec react est appelé, il n'affecte pas l'autre, donc le hook personnalisé est appelé à plusieurs reprises sans s'affecter.