기본 참조

갈고리가 뭐예요?
react 초기에는 클래스 구성 요소만 상태가 있었기 때문에 상태 관리와 생명주기 같은 일은 클래스를 처리할 때만 진정으로 중요하다.최근 몇 년 동안 React는 React 갈고리를 사용하는 유상태 기능 구성 요소를 도입했다.내가 아는 바에 의하면, 이 갈고리들은 종류에서 가능한 행동을 복제하기 위해 교묘하게 클립을 이용한다.클립이 어떻게 작동하는지 알아보려면 내 동영상을 보십시오 =>

useState
useState 갈고리는 기능 구성 요소의 상태입니다.기본적으로useState 함수를 사용하여 상태/반응 데이터를 만들 수 있습니다. 예를 들어.

const [state, setState] = React.useState(initialState)

따라서 변수'state'는 React에서 항상 state를 사용하는 것처럼 사용할 수 있는 상태입니다. (React에 익숙하지 않으면 devNursery.com을 방문하여 제 React 재생 목록을 보십시오.)상태 설정은 상태 값을 변경하는 데 사용할 수 있는 함수로, 상태 변경 값을 설정해야만 구성 요소가 상태 변경을 반영하기 위해 다시 렌더링됩니다.
갈고리의 또 다른 큰 장점은 여러 번 사용할 수 있기 때문에 클래스의 구성 요소처럼 모든 상태를 포함하는 대형 대상을 가지지 않고usestate 갈고리를 사용하여 상태를 만들 수 있다는 것이다.

const [name, setName] = React.useState("Alex Merced")
const [age, setAge] = React.useState(35)

사용 효과
라이프 사이클은 모든 프런트엔드 라이브러리에서 매우 중요합니다.생명주기 연결은 구성 요소를 불러오기 전이나 삭제한 후에 코드를 실행할 수 있도록 합니다.클래스 구성 요소에서componentDidMount(), componentDidUpdate(), componentWillUnmount() 등의 함수를 정의하고 하고 싶은 일을 정의합니다.이것은 무엇에 쓰는 것입니까?

구성 요소가 나타나기 전에 전형적인 부분은 구성 요소의 UI 구축에 필요한 데이터를 AJAX/수령 요청하는 것이다.

하나의 구성 요소가 소각된 후에 다른 요소에서 소각된 구성 요소 사건을 탐지하는 탐지기를 제거하는 좋은 시기입니다.

기능 구성 요소 중, 단지 하나의 기능만 여러 방식으로 사용할 수 있다. 즉useEffect이다.

React.useEffect(() => {
  //This is where stuff would happen the first time a component renders, and anytime any variable passed into the dependency array changes.

  return () => {
    //The function returned by useEffect only runs when the component is destoryed/removed
  }
}, [dependency1, dependency2])

그래서 useffect에는 두 개의 매개 변수가 있는데, 리셋과 의존 그룹이 있다.콜백은 처음 렌더링할 때 항상 실행되며 종속 배열의 값이 변경되면 반복됩니다.콜백 함수가 함수를 반환하면 어셈블리를 제거할 때 함수가 실행됩니다.

useRef
useRef 갈고리는ref를 생성합니다. 이것은 JSX에서 DOM 노드로서의 요소에 접근할 수 있는 변수를 만들 수 있습니다. 이 요소는 우리가 DOM 노드에서 사용하고자 하는 모든 속성을 가지고 있습니다.다음은 하나의 예다.

const MyComponent = (props) => {
    const input = useRef(null)

    const handleClick = (event) => console.log(input)

    return (<div>
                <input ref={input} value=5/>
                <button onClick={handleClick}>Click Me </button>
            </div>)
}

위 코드에서 단추를 누르면 변수를 출력합니다. 이것은 입력 탭의 참고입니다.너는 이런 방식을 통해 각종 유용한 속성을 찾을 수 있다.나는 심지어 그것으로 제3자 구성 요소의 숨겨진 함수에 접근했다.

useContext
React context API를 사용하면 전체 어셈블리 트리에 정보를 제공할 수 있습니다.useContext 갈고리는 어린이들이 쉽게 사용할 수 있도록 합니다.위아래 문장의 장점은 하나의 구성 요소가 제공하는 데이터는 손주와 증손주가 방문할 수 있고 각 단계에서 그것을 도구로 전달할 필요가 없다는 것이다.
컨텍스트 작성

const MyContext = React.createContext(null) //Creates Provider/Consumer

const MyComponent = props => {
  const [state, useState] = React.useState(initialState)

  return (
    <MyContext.Provider value={state}>
      <ChildComponent />
    </MyContext.Provider>
  )
}

공급자 구성 요소는 모든 하위 구성 요소에 데이터를 사용할 수 있도록 합니다. 위아래 문장을 이 구성 요소로 가져와서 이렇게 데이터를 얻기만 하면 됩니다.

import MyContext from "./somefile"

const GreatGrandchild = props => {
  const greatGrandpasState = React.useContext(MyContext)

  return <h1>{greatGrandpasState}</h1>
}

따라서 나는 아이나 손자의 데이터를 처리할 필요가 없는 상황에서 상술한 조작을 완성할 수 있다.괜찮았어!

사용자 교육자
Reducer 갈고리는 본질적으로 Redux 라이브러리의 기본 기능을 React native에 구축하는 것이다(Redux는 일부 추가 기능이 있지만 이것은 주요 목적을 제공한다).
본질적으로 모드는 이렇습니다. setState 함수를 사용하여 상태를 직접 바꾸는 것이 아니라 다음과 같은 동작을 수행할 수 있습니다.

분파 함수를 호출하는데 이 함수는 하나의 조작을 전달한다(일반적으로'type'속성과'payload'속성을 가진 대상이지만 이것은 약정일 뿐)

동작은 이전에 정의된 Reducer 함수에 전달되며 이 함수는 스위치나if문장을 사용하여 동작 유형에 따라 기능을 확정하고 이 함수가 되돌아오는 값은 새로운 상태가 됩니다.

우리 예를 하나 보자...

const initialState = { count: 1 }

const reducer = (state, action) => {
  switch (action.type) {
    case "add":
      return { ...state, count: state.count + action.payload }
      break

    case "sub":
      return { ...state, count: state.count - action.payload }
      break

    default:
      return state
  }
}

const MyComponent = props => {
  const [state, dispatch] = React.useReducer(reducer, initialState)

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: "add", payload: 1 })}>Add</button>
      <button onClick={() => dispatch({ type: "sub", payload: 1 })}>
        Subtract
      </button>
    </div>
  )
}

따라서 위의 예시에서dd 단추를 누르면 디스패치 함수를 호출하여 조작 전달{type: "add", payload: 1}으로 한다.이것은 Reducer 함수에 전달되며, Reducer 함수는 동작을 전달합니다."add"와 일치하는 to switch를 입력하고count 속성에 유효 부하량을 추가합니다.이런 방법의 장점은 구성 요소의 상태 변경 논리가 비교적 적고 모두 하나의 중심 위치, 즉 감속기에 집중된다는 것이다.
온전한 레드ux 체험을 얻기 위해 위아래 문장에서 분배 함수를 전체 구성 요소 트리에 전달할 수 있습니다.
모든 기능이 설정된 React 템플릿을 원한다면 다음 명령을 실행하십시오.npx merced-spinup reactreducer myproject