후크란 무엇입니까? React에서 일반적으로 사용되는 두 가지 Hook에 대해 이야기해 보겠습니다.

이 기사에서는 후크를 소개하고, 개발에 후크를 사용하는 것이 권장되는 이유에 대해 설명하고, React에서 가장 일반적으로 사용되는 두 가지 후크를 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

먼저 Hook이 무엇인지 소개하겠습니다.

Hook은 React 16.8의 새로운 기능으로, 클래스 컴포넌트에서 React의 다른 기능을 대체할 수 있으며 실제 작업에서 흔히 사용됩니다. [관련 권장 사항: Redis 동영상 튜토리얼]

개발에 후크를 사용하는 것이 권장되는 이유

hook는 기능적 구성 요소의 개발과 협력하는 데 특별히 사용되며 클래스 구성 요소의 일부 수명 주기를 대체하는 데 사용할 수 있습니다. 이것으로 인한 혼란을 피하기 위해 Hooks는 개발을 촉진하고 개발자가 코드를 더 쉽게 이해할 수 있도록 해줍니다

위는 제 개인적인 경험을 간단히 요약한 것입니다. 더 많은 이유는 React 공식 웹사이트를 참조하세요. :

https://react.docschina.org/docs/hooks-intro.html#motivation

useState

코드에서

React.useState(0)는 여기에 속성 값을 추가하는 것과 동일합니다. 클래스 컴포넌트의 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>
    )
}

사용 Hooks 사용 시 주의 사항

1. 루프, 조건 또는 중첩 함수에서는 Hook을 호출하지 마세요.

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

2. 컴포넌트 함수 외부에서는 Hook을 사용할 수 없습니다.

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-hooks ESLint 플러그인을 설치하면 코드 오류를 확인할 수 있습니다.

Custom Hook

hook은 실제로 구성 요소 간의 공유 논리를 용이하게 하는 기능입니다. , 그리고 사용자 정의 후크는 또한 반응과 함께 제공되는 후크를 호출합니다. 이름은 use

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

로 시작해야 합니다. 동일한 후크가 상태를 공유하기 위해 여러 구성 요소에서 사용됩니까?

답은: 아니요. 반응과 함께 제공되는 후크에 대한 각 호출은 독립적이고 서로 영향을 미치지 않으므로 사용자 정의 후크는 독립적이며 여러 번 호출해도 서로 영향을 미치지 않습니다. 프로그래밍 관련 지식을 더 보려면 다음을 방문하세요.

프로그래밍 소개

! !

위 내용은 후크란 무엇입니까? React에서 일반적으로 사용되는 두 가지 Hook에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!