반응 기능 구성 요소에 대한 후크

목차

useState

useEffect

useCallback

메모 사용

useRef

useContext

useReducer

사용자 지정 후크

---

useState

기능 구성 요소의 상태 형식: const [value,setValue] = useState( {xxxx} )

console.log([value, setValue]) 인쇄하면 다음을 볼 수 있습니다.

• 값-----상태 변수 이름
• setValue-----상태 값을 변경하는 변수에 해당하는 메소드
• {xxxx} ----- 상태, 객체, 배열, 함수, 문자열 등의 초기 값 모두 사용 가능

간단한 사용 예:

import './App.css';

import React, {useState} from 'react'


export default function App() {

  const [value, setValue] = useState({id:0,name:'蔡某坤'})

  console.log([value, setValue])
  return (
    <div>
        <button onClick={()=>setValue({id:1,name:'英雄可以受委屈，但你不能踩我的切尔西'})}>改变</button>
        <div>{value.name}</div>
    </div>
  )
}

---

useEffect / useLayoutEffect

  useEffect(() => {
    console.log("我被执行了")
    //setValue({id:1,name:'英雄可以受委屈，但你不能踩我的切尔西'})
    return ()=>{}
  },[value]);

•  useEffect

        useEffect는 componentDidMount, componentDidUpdate 및 componentWillUnmount의 조합과 동일합니다. 처음에는 기본적으로 두 번 실행되며 다시 렌더링될 때마다 한 번씩 호출됩니다.

         이 메소드에는 useState 변수의 종속성인 두 번째 매개변수가 있습니다. 두 번째 매개변수가 없으면 일반 componentDidMount + componentDidUpdate이고 두 번째 매개변수를 추가한다는 것은 지정된 상태를 모니터링한다는 의미이며 Vue의 감시 및 계산과 유사하게 지정된 상태가 변경될 때만 실행됩니다. 두 번째 매개변수가 추가되면 이 메서드에서 지정된 상태를 수정할 수 없습니다. 그렇지 않으면 무한 루프가 발생합니다.

        콜백 함수는 일부 이벤트 리스너를 지우는 데 사용됩니다.

import './App.css';
import React, {useState,useEffect} from 'react'

export default function App() {

  const [value, setValue] = useState(true)

  return (
    <div>
        <button onClick={()=>setValue(!value)}>改变</button>
        {value? <A/>:'子组件已被销毁'}
    </div>
  )
}

function A() {
  
  const [value, setValue] = useState(0)

  useEffect(() => {
    var times=setInterval(() => {
      console.log("英雄可以受委屈，但你不能踩我的切尔西")
      setValue(value+1)
    }, 1000);
    return ()=>{clearInterval(times)}
  });

  return (
    <div>
        <div>我是子组件{value}</div>
    </div>
  )
}

• useLayoutEffect

useLayoutEffect와 useEffect의 차이점은 호출 시점에 있는데, useLayoutEffect는 DOM이 업데이트된 후 페이지가 렌더링되기 전에 호출되고 useEffect는 페이지가 렌더링된 후에 실행됩니다. 마찬가지로 componentDidMount 및 componentDidUpdate도 DOM 업데이트가 완료된 후 페이지가 렌더링되기 전에 호출됩니다.useLayoutEffect를 사용하면 페이지 차단이 발생할 수 있고 useEffect를 사용하면 페이지 흔들림이 발생할 수 있습니다.

---

useCallback

         useCallback(메모리 함수). setCount가 트리거되면 전체 함수의 모든 것이 다시 실행되고 내부 메서드는 자연스럽게 재정의됩니다. 이때 useCallback을 사용하면 효과적으로 함수 생성을 줄일 수 있으며 다시 렌더링할 때 실행되지 않습니다.

        useCallback에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 메서드이고 두 번째 매개변수는 [xxx]입니다. 여기서 xxx는 정의된 상태 이름입니다. 두 번째 매개변수가 채워지지 않았거나 빈 배열인 경우 내부 값은 변경되지 않고 항상 이전 초기화에서 캐시된 값이 됩니다. count ], count 값이 변경되면 useState는 자동으로 업데이트된 값을 캐시합니다. 이는 Vue의 compute 속성과 다소 유사합니다.

import React, { useCallback, useState } from 'react'

export default function App() {

  const [count, setCount] = useState(0);

  const add =useCallback( () => {
    setCount(count + 1)
  },[])

  return (
    <div>
      <button onClick={() => { add() }}>增加</button>
      {count}
    </div>
  )
}

---

메모 사용

        useMemo는 useCallback과 유사합니다: useCallback은 전달한 함수를 반환하고 useMemo는 값을 반환합니다. useCallback이 전달한 메서드는 자동으로 실행되지 않지만 useMemo가 전달한 메서드는 자동으로 실행됩니다.

import React, { useMemo, useState } from 'react'

export default function App() {

  const [count, setCount] = useState(0);

  const add =useMemo( () => {
    console.log("我被执行了")

    return count
  },[count])   

  return (
    <div>
      <button onClick={() => { setCount(add + 1) }}>增加</button>
      {count}
      <hr></hr>
      <div>add方法自动返回：{add}</div>
    </div>
  )
}

---

 

useRef

클래스 구성 요소의 ref와 마찬가지로 바인딩을 통해 DOM 노드를 얻습니다.

import React, { useMemo, useRef, useState } from 'react'

export default function App() {

  const [text, setText] = useState("");

  const input_ref=useRef();

  return (
    <div>
      <input ref={input_ref} onChange={()=>setText(input_ref.current.value)}></input>
      <div>输入框的值：{text}</div>
    </div>
  )
}

 

 

---

useContext

기능 구성 요소의 공급자 및 소비자, 예는 다음과 같습니다.

import React, { useContext, useRef, useState } from 'react'

const context = React.createContext()

export default function App() {

  const [text,setText]=useState("")
  const input_ref=useRef()

  return (
    <div>
      <context.Provider value={text}>
        <div>我是父组件：{text}</div>
        <input ref={input_ref} onChange={() => setText(input_ref.current.value)}></input>
        <A/>
      </context.Provider>
    </div>
  )
}

function A() {

  const A_context = useContext(context)

  return (
    <div>
      <hr></hr>
      <div>我是子组件，用context接收到的值：{A_context}</div>
      <hr></hr>
    </div>
  )
}

 

---

 

useReducer

        useReducer 글로벌 상태 관리. useState의 대안. 리듀서 형태의 리듀서를 받고  ,  클래스 컴포넌트의 구독 및 발행과 유사하게 (state, action) => newState 현재 상태와 그 지원 방식을 반환하며  ,dispatch

import React ,{useReducer}from 'react'

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return {count: action.payload};
    default:
      throw new Error();
  }
}

 export default function App() {
  const [state, dispatch] = useReducer(reducer, {count:0});
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: 0})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

---

사용자 지정 후크

기능적 구성 요소에서 사용자 지정 지시문을 사용하려면 사용부터 시작해야 합니다.

다음과 같이 두 가지 방법으로 나눕니다. 

import React, {  useRef, useState } from 'react'

export default function App() {

  const [text,setText]=useState("")
  const input_ref=useRef()

  const input_change=()=>{
      setText(input_ref.current.value)
  }

  const input_text=()=>{
    return "【"+text+"】"
  }

  return (
    <div>
        <div>input的值：{input_text()}</div>
        <input ref={input_ref} onChange={input_change}></input>
    </div>
  )
}

 이 두 가지 메서드를 외부로 이동합니다.함수 이름이 "use"로 시작하여 구성 요소에서 사용할 수 있습니다.사용자 지정 후크는 구성 요소의 메서드를 외부로 이동하여 코드의 직관성을 높일 수 있습니다.

import React, { useRef, useState } from 'react'

export default function App() {

  const [text, setText] = useState("")
  const input_ref = useRef()

  const input_change = useInputChange(setText, input_ref)

  const input_text = useInputText(text)

  return (
    <div>
      <div>input的值：{input_text}</div>
      <input ref={input_ref} onChange={input_change}></input>
    </div>
  )
}

function useInputChange(setText, input_ref){
    return ()=>setText(input_ref.current.value)
}


function useInputText(text) {
  return "【"+text+"】"
}

---