따라서 이것은 나의 시도이다. 갈고리에 익숙하지 않은 사람들로 하여금 가장 중요한 갈고리를 신속하게 개술하게 하는 것이다. 당신은 이 갈고리들을 알고 모든 갈고리를 사용하는 기본적인 예시를 사용해서 당신의 입문을 도와야 한다.
지금 출발합시다.

일반 소개

갈고리는 여러 개의 문제를 해결하려고 시도하지만, 가능한 한 간단하게 하기 위해서, 갈고리가 당신을 허락한다는 것을 알아야 합니다.

기능 구성 요소

에 상태 포함

여러 구성 요소에서 상태 논리 재사용

논리가 너무 커지면 논리 단순화

첫 번째 갈고리부터 시작하겠습니다.

사용 상태

usestate는 기능 구성 요소에 상태가 있는 갈고리 방식입니다. 예를 들어 clap 계수기를 실행하고 있다고 가정하면 클래스 기반 구성 요소를 실행해서 이 점을 실현합니다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      claps: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.claps} times</p>
        <button onClick={() => this.setState({ claps: this.state.claps + 1 })}>
          Clap
        </button>
      </div>
    );
  }
}

hooks에서 너도 이렇게 쓸 수 있다.

function Example() {
  const [claps, setClaps] = useState(0);

  return (
    <div>
      <p>You clapped {claps} times</p>
      <button onClick={() => setClaps(claps + 1)}>
        Clap
      </button>
    </div>
  );
}

봐라, 너는 전체 기능 상태를 얻었다.
이 const [claps, setClaps] = useState(0);선은 ES6에 도입된 패턴 분해를 이용합니다.claps 는 우리의 상태 필드입니다. 이것은 우리가 useState 에게 전달하는 모든 값의 초기 값을 가지고 있으며, 이 경우 0 이기 때문에 초기 claps는 0 와 같습니다setClaps 상태 필드를 수정하는 데 사용할 함수입니다. 보시다시피 clap 단추를 누르면 claps 를 터치하고 기존 값onClick 더하기setClaps 호출claps 필드의 새 값입니다.
이게 첫 번째 갈고리를 포함한다!

사용 효과

1 갈고리는 claps, useEffect, componentDidMount 및 componentWillUnmount 등 기존의 많은 생명주기 방법을 모의하는 데 사용할 수 있다.
그러나 우리가 사용 예시를 보기 전에, 당신은 componentDidUpdate 두 개의 매개 변수, 하나의 함수와 하나의 그룹을 포함하고 있다는 것을 알아야 합니다.
수조 (우리는 의존 수조라고 부른다) 는 값의 이름으로 구성되며, 이 값은 변경할 때 호출되는 함수 - 첫 번째 인자

만약 우리가 의존항수조가 없다면?

이것은 useEffect 함수 - 첫 번째 인자 - 모든 렌더링에서 실행된다는 것을 의미합니다. 이것은 보통 우리가 원하는 것이 아닙니다

다음 예시에서 의존항수 그룹이 비어 있으면 어떤 상황이 발생할지 언급할 것이다

상태/아이템 변화에 반응

예를 하나 봅시다.
사용자가 박수를 칠 때마다 당신이 무엇을 하고 싶은지 가정해 보세요. 예를 들어 당신이 박수를 쳤다는 소식을 componentWillRecieveProps 갈고리로 우리가 이렇게 할 수 있다고 가정해 보세요.

function Example() {
  const [claps, setClaps] = useState(0);

  useEffect(()=>{
     console.log("You clapped");
  },[claps])

  return (
    <div>
      <p>You clapped {claps} times</p>
      <button onClick={() => setClaps(claps + 1)}>
        Clap
      </button>
    </div>
  );
}

그래서 여기서 발생하는 일은 상태 필드가 바뀔 때마다react는 우리의 모든 useEffect를 검사하고 (예, 우리의 코드에 여러 개의 상태 필드가 있을 수 있습니다. 마치 여러 개의 사용 useEffect 정의된 상태 필드가 있는 것처럼), console.log 의 모든 함수를 자극합니다. 그들의 의존 관계 그룹에서 이 함수들은 변경된 필드를 가지고 있습니다.
그래서 우리의 예에서, 우리가 clap 단추를 눌렀을 때, useEffect 함수가 호출되고, useState 상태 필드가 변경되어, 이useffect의 첫 번째 매개 변수 (함수) 를 호출합니다. 의존항수 그룹이 useEffect 필드를 포함하기 때문입니다.

    ...
    useEffect(()=>{
       console.log("You clapped");
    },[claps])

    ...

이것은 기본적으로 어떻게 시뮬레이션하는가setClaps물론 도구가 바뀔 때 이 구조를 사용하여 useEffect 갈고리 함수를 호출할 수도 있습니다. 원하는 도구를 의존 관계 그룹에 추가하기만 하면 됩니다. 따라서 CLAP가 구성 요소의 상위에서 얻을 수 있습니다. 예를 들어 다음과 같습니다.

function({claps}){
    useEffect(()=>{
       console.log("You clapped");
    },[claps])
    ...
}

또한 종속 수조라고 불리기 때문에 여러 개의 값이 있을 수 있음을 기억하십시오. 종속 수조 중 하나 이상의 값이 바뀌면 이 함수는 자극됩니다

데이터 획득

useEffect는 데이터를 가져오는 데도 사용할 수 있지만 이 연결을 사용하여 데이터를 가져오기 전에 가장 중요한 질문은 다음과 같습니다.

의존항수조가 비어 있다면?

이것은 갈고리가 모든 렌더링에서 실행되지 않는다는 것을 의미한다. 왜냐하면 우리는 갈고리가 어떤 변수도 감시하지 말라고 명확하게 알려주었기 때문에 마운트할 때만 실행된다

우리가 데이터를 얻고 싶을 때, 이것은 통상적으로 우리가 원하는 것이다

따라서 이제 useEffect를 마운트할 때만 실행하는 방법을 알게 되었습니다. (아날로그 componentDidMount 생명주기) 데이터를 얻는 것은 이렇게 간단합니다.

    function App(){
      const [data,setData] = useState([]);

      useEffect(()=>{
       const data = await axios('https://datafetchingexample/data');
       setData(data);
      },[])

      ...
    }

정리하다

다음 단계는 우리가 구성 요소에서 처리하고자 하는 모든 정리를 어떻게 사용하는지 확인하는 것이다 claps.

    function App(){
      const [data,setData] = useState([]);

      useEffect(()=>{
        const source = axios.CancelToken.source();

        const data = await axios('https://datafetchingexample/data');
        setData(data);

        return () => {
          source.cancel();
        };

      },[])


      ...
    }

알 수 있는 바와 같이, 우리는 갈고리에 리턴 함수를 추가했습니다. 이 리턴 함수는 구성 요소가 마운트될 때 실행됩니다. 이것은 모든 정리 (플러그인 닫기, 구독 취소, 요청 취소 등) 를 할 수 있는 완벽한 장소가 됩니다. 기본적으로componentWillUnMount의 사용법과 같습니다

컨텍스트 사용

다음으로 연결이 있는 상하문을 사용합니다

상하문은react 크로스 구성 요소 관리 상태의 방식이며, 기본적으로react 자체의redux
구성 요소에 데이터가 있으면 구성 요소의 후손 (일반적으로 직접 하위 세대 또는 간접 하위 세대) 이 이 데이터에 접근할 수 있기를 희망할 때 사용됩니다. 예를 들어 우리가 데이터를 얻을 수 있는 구성 요소가 있다고 가정하면 데이터를 하위 세대에 전달하고자 하는 것은 분명하다. 이렇게 하는 방법은 도구를 사용하는 것이지만, 하위 세대에 이 데이터를 가지고 싶다면...이 점에서 도구 사용은 더욱 번거로워질 수 있지만 언어 사용 환경은 더욱 의미가 있다.
그러나 설명에 편리하도록 직계 자녀에게 이 데이터를 전달하고 싶다면
우선, 우리는 값이 빈 대상인 상하문을 만들 것이다claps다음은 상하문을 전달할 구성 요소를 포장해야 합니다componentDidUpdate
이것이 바로 우리가 하위 구성 요소에 대한 것이다. 우리가 해야 할 일은value 속성을 통해 상하문의 값을 확정하는 것이다
(이런 상황에서 우리는 데이터 필드를 전달하기를 희망한다.) 그래서 우리는 이렇게 했다

    ...

    const DataContext = React.createContext({});

    function App(){
      const [data,setData] = useState([]);

      useEffect(()=>{
        const source = axios.CancelToken.source();

        const data = await axios('https://datafetchingexample/data');
        setData(data);

        return () => {
          source.cancel();
        };

      },[])


      return (

         <DataContext value={{data}}>
           <Child/>
         </DataContext>

      )
    }

이제 하위 구성 요소로 넘어가면 useEffect 갈고리를 사용하여 우리가 원하는 상하문 대상을 전달하고 const DataContext = React.createContext({}); 속성에 추가한 데이터를 간단하게 얻을 수 있습니다

    ...


    function Child(){
      const {data} = useContext(DataContext);


      return (

         <ul>
           data.map(v=>{
             return (
               <li>
                 {v.value}
               </li>
             )
           })
         </ul>

      )
    }

지금 우리는 이미 가장 유행하는 갈고리 세 개를 토론했으니, 갈고리의 일반적인 규칙을 이야기합시다

연결 규칙

맨 위에서만 연결 호출

이것은 순환, if 조건 또는 끼워 넣는 함수에 연결고리를 사용해서는 안 된다는 것을 의미합니다. 연결고리는 초기화 순서에 따라 다르기 때문입니다. 예를 들어 만약에 if 조건의 연결고리에 연결고리를 추가하면 if 조건이 다음 렌더링에서 발생하지 않아 연결고리에 혼란을 초래할 수 있습니다.우리는 다른 문장에서 이것에 대해 더욱 많은 토론을 진행할 것이다

자바스크립트 함수에서 갈고리를 호출하지 마십시오

너는 두 곳에서 낚시를 할 수 있다

반응 기능 구성 요소

맞춤형 갈고리, 우리는 다음에 토론할 것이다

사용자 정의 연결

현재react 갈고리의 마지막이자 핵심 부분입니다. 사용자 정의 갈고리를 만듭니다.
사용자 정의 연결은javascript 함수로 이름<DataContext value=somevalue></DataContext>으로 시작하고 다른 연결(사용자 정의 또는 내장)을 호출할 수 있습니다
사용자 정의 갈고리를 구축하는 것은 여러 곳에서 사용할 수 있도록 논리를 추출할 수 있다는 것을 의미한다. 예를 들어 이름과 나이를 받아들일 수 있는 몇 개의 입력을 얻었다고 가정하면

function InputForm(){
  const [name,setName] = useState("")
  const [age,setAge] = useState(0)

  return (
    <div>
       <input type="text" placeholder="Enter your name" value={name} onChange={(e)=>setName(e.target.value)/>
       <input type="number" placeholder="Enter your age" value={age} onChange={(e)=>setAge(e.target.value)}/>

    </div>

  )

}

현재, 우리 프로그램의 모든 입력은 기본적으로 유사한 구조를 가지고 있으며, 입력 필드는 값, onChange 속성을 가지고 있으며, 이 파일뿐만 아니라, 상태 처리 입력을 사용하면 당신이 가지고 있는 여러 파일에서, 사용자 정의 갈고리는 우리가 다른 곳에서 사용할 수 있도록 다시 사용할 수 있는 논리적 부분을 추출할 수 있습니다.
이렇게 보입니다.

function useFormInput(initialValue){
  const [value,setValue] = useState(initialValue);
  function onChange(e){
    setValue(e.target.value);
  }
  return {value,onChange};

}

function InputForm(){
  const name = useFormInput("")
  const age = useFormInput(0)

  return (
    <div>
       <input type="text" placeholder="Enter your name" {...name} />
       <input type="number" placeholder="Enter your age" {...age} />
    </div>

  )

}

더 깨끗하지 않아요?이것은 일반적인 방식과 같은 영향을 미칠 수 있지만, 현재 당신은 응용 프로그램의 어느 곳에서든 끊임없이 변화하는 기능을 가진 입력을 할 수 있는 다시 사용할 수 있는 갈고리가 있습니다. 갈고리를 사용하여 입력 표시에서 되돌아오는 값을 분해하면 됩니다!
만약 네 개의 프로젝트를 구축할 때 이 주제에 대해 더 많은 연습을 해야 한다고 생각한다면, 나는 당신이 이 과정을 공부하도록 격려합니다.
https://www.udemy.com/course/react-hooks-projects-course/