반응 언어 환경 안내

33622 단어
지난주에 Redux 설정에 대한 내용을 썼기 때문에 오늘 당신의 상태를 추적하는 또 다른 방법을 토론할 것입니다. 이것은 React에서 나온 것입니다.
Redux와 마찬가지로 Context는 구성 요소 간에 데이터를 공유하는 방법으로 사용하지 않은 구성 요소를 통해 도구를 전달할 필요가 없지만 Context는 매우 가볍고 설정하기 쉽다.
뛰어 들어가라고!
지난주와 같이, 오늘 나는 코드가 하나 있는데, 이것은 우리가 입력 상태에서 추적하는 입력이 있을 것이다. 단추를 눌렀을 때, 입력 상태로 사용자 상태를 업데이트하고 페이지에 표시할 것이다.나는 사용자를 추적하기 위해 컨트롤러 로그를 만들었다.
나는 몇 층을 만들었기 때문에 나는 너에게 상하문의 예를 하나 줄 수 있다.
import React, { useState } from "react";
import Layer2 from "./Layer2";

function App() {

  const [input, setInput] = useState('');
  const [user, setUser] = useState('');

  console.log(user);

  const handleClick = () => {
    setUser(input);
  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;

우선, StateProvider라는 src 폴더에 두 개의 파일을 만들 것입니다.js와 감속기.회사 명

이제 StateProvider로 들어가겠습니다.js 및react에서createContext,useContext,useReducer 가져오기 허용
import React from 'react'
import { createContext, useContext, useReducer } from 'react'
createContext는 상하문을 초기화할 수 있습니다.useContext는 상하문 대상을 받아들이고 상하문의 현재 값을 되돌려줍니다. 이 값을 다시 보여 줍니다.
useReducer는 트리거 (한 종류) 를 받아들이고 트리거 동작의 디스패치 도움말로 트리거 값을 되돌려줍니다.
현재createContext를 초기화하고 변수에 저장해야 합니다. 이것을 StateContext라고 부르고 내보냅니다.
이제 StateProvider라는 변수를 만들 것입니다. 세 가지 기능이 있습니다.Reducer, initialState 및 children.
StateContext에서 제공하는 프로그램에 접근할 수 있는 태그를 되돌려줍니다. useReducer로 값을 설정합니다. 이것은 Reducer (수용 형식) 와 initialState (초기 값) 를 가져옵니다.
이제 우리는 이 라벨로 어린이 도구를 포장할 것이다. 이것은 우리의 응용 프로그램을 가리킬 것이다.회사 명
import React from 'react'
import { createContext, useContext, useReducer } from 'react'
export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
이제 우리 색인을 봅시다.회사 명
여기서 StateProvider에서 StateProvider를 가져옵니다.js 파일, 우리는 그것으로 우리의 응용 프로그램 구성 요소를 포장할 것입니다.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import { StateProvider } from './StateProvider'

ReactDOM.render(
  <StateProvider initialState={} reducer={}>
    <App />
  </StateProvider>
  , document.getElementById("root"));
보시다시피 State Provider는 State Provider에서use Reducer로 설정한 initial State와reducer를 사용합니다. 그러나 우리는 거기에 아무런 가치가 없기 때문에 응용 프로그램이 약간 붕괴될 수 있습니다. 그러나 그것을 복구하기 위해서 우리는 지금 우리의 Reducer를 사용해야 합니다.js 파일.
우리 감속기에서색인에 추가할 initialState와reducer 파일을 만들고 내보냅니다.js.user를 만들고null로 설정합니다.
export const initialState = {
  user: null,
}
이제 상태와 동작을 취하는 감속기를 만듭니다.감속기의 논리는 switch 문장으로 구성되고 표현식은 하나의 유형이 될 것이다.케이스는 SET_USER로 설정됩니다. 사용자를 설정하기 때문에 기본 반환 상태를 설정하고 reducer를 내보냅니다.콘솔을 하나 놓읍시다.선택한 작업을 보려면 로그인합니다.
export const initialState = {
  user: null,
}

const reducer = (state, action) => {

  console.log(action)

  switch (action.type) {
    case 'SET_USER':
    // logic
      break;
    default:
      return state;
  }
}

export default reducer;
이제 set_USER 용례를 설정합니다.우리는 모든 상태를 덮어쓰지 않고 사용자를 동작으로 설정할 수 있도록 확장 조작부호를 사용해야 한다
export const initialState = {
  user: null,
}

const reducer = (state, action) => {
  console.log(action)
  switch (action.type) {
    case 'SET_USER':
      return {
        ...state,
        user: action.user
      }
      break;
    default:
      return state;
  }
}

export default reducer;
이제 우리는 우리의 색인으로 돌아갈 수 있다.js 및 initialState와 Reducer를 가져옵니다.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import { StateProvider } from './StateProvider'
import reducer, { initialState } from './reducer'

ReactDOM.render(
  <StateProvider initialState={initialState} reducer={reducer}>
    <App />
  </StateProvider>
  , document.getElementById("root"));
마지막 단계는 우리의 상태 제공자로 넘어갑시다.useContext와 StateContext를 사용할 변수useStateValue를 만듭니다.useStateValue는 상하문 상태에 접근할 수 있도록 합니다.
import React from 'react'
import { createContext, useContext, useReducer } from 'react'
export const StateContext = createContext();


export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

// this will let us interact with our Context State
export const useStateValue = () => useContext(StateContext);
현재, 우리는 응용 프로그램에서 사용하거나 상하문을 사용할 준비가 되어 있다.js.
StateProvider에서 useStateValue를 가져옵니다.회사 명
import React, { useState } from "react";
import Layer2 from "./Layer2";
import { useStateValue } from './StateProvider';

function App() {

  const [input, setInput] = useState('');
  const [user, setUser] = useState('');

  console.log(user);

  const handleClick = () => {
    setUser(input);
  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;
이제 사용자 상태를 삭제하고handleClick에서 논리를 지우고 컨트롤러를 주석해야 합니다.응용 프로그램에서 로그인 (사용자).js는 우리의 상하문을 사용합니다.
useStateValue에는 현재 상태 값과 스케줄링에 접근할 수 있는 상태가 있습니다. 이 스케줄링은 우리의 상태를 새 값으로 촉발합니다.
import React, { useState } from "react";
import Layer2 from "./Layer2";
import { useStateValue } from './StateProvider';

function App() {

const [ state, dispatch ]  = useStateValue()

  const [input, setInput] = useState('');


  // console.log(user);

  const handleClick = () => {

  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;
이제 논리를 handleClick에 추가합니다.dispatch를 사용하고 "SET\u USER"유형을 선택해야 합니다.
그리고 사용자를 입력 상태로 설정할 수 있습니다.상태를 해체하고 사용자를 얻도록 하겠습니다.콘솔에 대한 설명을 취소하겠습니다.로그 (사용자)
import React, { useState } from "react";
import Layer2 from "./Layer2";
import { useStateValue } from './StateProvider';

function App() {

const [ { user }, dispatch ]  = useStateValue()

  const [input, setInput] = useState('');


  // console.log(user);

  const handleClick = () => {
    dispatch({
      type: 'SET_USER',
      user: input
    })

  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;
현재 입력에 입력하거나 이름을 입력하고 컨트롤러를 보면 작업이 보이고 상하문 상태가 업데이트됩니다.

지금 우리는 4층으로 들어갈 수 있다.js 및 useStateValue를 가져오고 사용합니다.
import React from 'react'
import { useStateValue } from './StateProvider';

function Layer4() {

  const [{ user }, dispatch] = useStateValue();

  return (
    <div>
      <h1>Layer 4</h1>
      {user}
    </div>
  )
}

export default Layer4
이제 4층에서 사용자 상태를 볼 수 있습니다!

결론
언어 환경은 매우 간단하고 쉬운 방식으로 당신의 상태를 유지할 수 있으며, 도구를 뚫을 필요가 없다.
기능
Unity 관리자에 Dictionary 스타일 목록 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage