React: 반응은 중첩 된 컨텍스트를 어떻게 해결합니까?

곧 출시 될 Hooks API는 컨텍스트를 소비하는 다른 방법을 제공합니다.

https://reactjs.org/docs/hooks-reference.html#usecontext

감사합니다. 하지만 공급자는 어떻습니까?

솔직히 말할 게. 이런 종류의 구현이 발생하면 아키텍처 디자인이 좋지 않은 것 같고 React 컨텍스트를 사용하지 않아야 할 것입니다.

아니요, 새 저장소 컨테이너를 디자인하고 있습니다. 반응에서 컨텍스트와 함께 작동해야합니다.
https://github.com/rabbitooops/rako

그 라이브러리는 공급자 / 소비자의 5 계층 깊이와 어떤 관련이 있습니까?

Redux와 같은 단일 저장소 솔루션 대신 반응 할 여러 저장소 주입을 지원하기 때문입니다.

이 경우 컨텍스트 처리는 이제 라이브러리의 사용자가 아니라 라이브러리의 사용자에게 있습니다. 기능을 활용하는 방법은 그들에게 달려 있으며, 모든 공급자를 한곳에서 원할 경우 (여러 상점을 갖는 목적에 위배됨) 그것이 그들의 선택입니다. 이상적으로는 다중 스토어 솔루션이 애플리케이션의 여러 분할에서 구현되므로 이와 같은 중첩 컨텍스트는 훨씬 더 드뭅니다.

적어도 내 2 센트.

따라서 컨텍스트 API는 redux와 같은 단일 저장소 솔루션에만 친숙합니다.

전혀. 그러나 더 현실적인 예없이 문제를 논의하는 것도 어렵습니다. 하나 만드시겠습니까?

세 개의 상점 테마, 사용자 및 카운터가 있다고 상상해보십시오.

function theme(getState) {
  return {
    color: 'white',
    setColor(color) {
      this.setState({color})
    }
  }
}

function user(getState) {
  return {
    name: '',
    setName(name) {
      this.setState({name})
    }
  }
}

function counter(getState) {
  return {
    value: 0,
    increment() {
      const {value} = getState()
      this.setState({value: value + 1})
    }
  }
}

const [themeStore, userStore, counterStore] = createStores(theme, user, counter)
const [themeContext, userContext, counterContext] = createContexts(themeStore, userStore, counterStore)


class App extends React.Component {
  render() {
    return (
      <themeContext.StoreProvider>
        <userContext.StoreProvider>
          <counterContext.StoreProvider>

            <Child />

          </counterContext.StoreProvider>
        </userContext.StoreProvider>
      </themeContext.StoreProvider>
    )
  }
}

class Child extends React.Component {
  static contextType = [themeContext, userContext]
  render() {
    const [theme, user] = this.context

    /* ... */
  }
}

이상적인 구문은 무엇입니까?

context.write를 사용하고 중첩없이 여러 컨텍스트 사용을 지원합니다.

중첩없이 여러 컨텍스트를 사용하는 것은 이미 지원됩니다. (후크 포함.)

Context.write에는 RFC가 열려 있습니다. 매우 복잡한 질문을 제기하기 때문에 통과할지 여부는 알 수 없습니다. 그러나 RFC가 열려있는 동안이 문제에서 어떤 조치를 취할 수 있는지 잘 모르겠습니다. 이미 RFC 동기에있는 것 외에 추가 할 것이 있습니까?

질문하고 싶어요. React가 클래스에서 여러 컨텍스트 사용을 지원하지 않는 이유는 무엇입니까? Hooks API는 해결해야 할 문제가 많고 현재 매우 불안정한 것 같습니다.

static contextType = [themeContext, userContext]

const [theme, user] = this.context

여러 컨텍스트를 자동으로 중첩 할 수있는 StoreProviders 를 구현하겠습니다.

const StoreProviders = constructStoreProviders(...storeContexts)

<StoreProviders>
  <Child />
</StoreProviders>

도와 주셔서 감사합니다 Dan! :)

@rabbitooops 후크에 정확히 어떤 문제가 있습니까? 나는 프로덕션에서 후크를 사용하며 우리 팀에 잘 작동합니다.

그리고 이것은 어떻습니까? 지금은 후크를 사용해도 안전합니다. @gaearon

// A library
function useStoreProviders(Component, ...contexts) {
  contexts.forEach(context => Component.useProvider(context, someValue))
}

// User code
function App(props) {
  const [theme] = useState('white')

  // Safe to use `component hook`.
  App.useProvider(themeContext, theme)
  App.useShouldComponentUpdate(() => {})

  // Meanwhile, library can also use `component hook`.
  useStoreProviders(App, storeContext1, storeContext2, storeContext3)

  // Normal hook can't use `component hook`.
  customHook()

  /* ... */
}

<App />

decorateBeforeRender(App)

@rabbitooops https://github.com/reactjs/rfcs/issues/101

@rabbitooops 단일 스토어와 심볼을 키로 사용하여 여러 층의 스토어를 모방하는 것은 어떻습니까?

data Store = Leaf Object | C Store Store

또는 자바 스크립트에서 불완전한 방식으로 :

const LEFT = Symbol('LEFT')
const RIGHT = Symbol('RIGHT')
function createLeafStore = return new Store({});
function createStore(leftChild :: Store, rightChild :: Store) {
  return new Store({[LEFT]: leftChild, [Right]: rightChild})
}

@TrySound 다름 : App.useProvider

@zhujinxuan 죄송합니다.

@zhujinxuan 당신은 사용할 수 있습니다 언급되지 않은 , 예를 :

<Subscribe to={[AppContainer, CounterContainer, ...]}>
  {(app, counter, ...) => (
    <Child />
  )}
</Subscribe>

Hooks API는 해결해야 할 문제가 많고 현재 매우 불안정한 것 같습니다.

우리는 1 ~ 2 주 이내에 출시를 준비하고 있습니다. 여러분이 그것을 추론 한 이유가 확실하지 않습니다. 안전을 원하신다면 곧 출시 될 예정 이니 잠시 기다려 주시기 바랍니다.

그리고 이것은 어떻습니까?

루프에서 후크를 호출하는 것은 일반적으로 허용되지 않습니다 ( forEach ). 이런 식으로 문제를 일으키는 것은 쉽습니다.

useStoreProviders

useProvider 및 useShouldComponentUpdate 둘 다 Hooks로 문제가 있습니다 (이것이 React에 후크가없는 이유입니다). https://github.com/facebook/react/issues/14534#issuecomment -455411307에서 내 응답을

전반적으로이 문제의 의도를 이해하는 데 어려움을 겪고 있습니다.

다중 컨텍스트 소비는 useContext 후크로 해결됩니다. 너무 많은 컨텍스트를 구독하고 너무 자주 다시 렌더링하는 구성 요소를 작성하기가 너무 쉽기 때문에 배열로 "자동화"하는 것은 권장 useContext API가 제공하는 구성 요소가 수신하는 컨텍스트를 명확히 이해해야합니다. 필요한 경우 특정 컨텍스트를 명시 적으로 사용하는 useMyContexts() 후크를 작성할 수 있습니다. 배열 길이가 변경되면 깨질 수 있으므로 동적으로 만드는 것은 권장하지 않습니다.

여러 공급자를 배치하는 것은 "보일러 플레이트"로 볼 수 있으며 결국 이에 대한 해결책이있을 수 있습니다. 그러나 나는 또한 당신이 그것을 큰 문제로 보는 이유를 이해하지 못합니다. 이 스레드의 예는 문제를 설명하기에 충분히 현실적이지 않습니다. 애플리케이션 상단 어딘가에 JSX의 여러 레이어를 중첩해도 나쁜 것은 없습니다. 대부분의 구성 요소에 훨씬 더 깊은 div 중첩이 있으며 그다지 손상되지 않습니다.

이 점에 대해 이미 답변 한 것 같아서 마무리하겠습니다. 토론은 원으로 진행됩니다. 빠진 것이 있으면 알려주세요.

OT : @gaearon , useRender 같은 것을 추가하거나 렌더링을 더 많이 제어 할 계획이 있습니까? 예 :

useRender(() => <div />, [...props])

두 번째 인수는 useEffect 후크와 동일한 역할을합니다.

useMemo 는 당신의 친구입니다.

https://reactjs.org/docs/hooks-faq.html#how -to-memoize-calculations에서 두 번째 스 니펫을 참조하십시오.

나는 다음과 같은 코드로 끝났습니다.

function provider<T>(theProvider: React.Provider<T>, value: T) {
   return {
      provider: theProvider,
      value
   };
}

function MultiProvider(props: {providers: Array<{provider: any; value: any}>; children: React.ReactElement}) {
   let previous = props.children;
   for (let i = props.providers.length - 1; i >= 0; i--) {
      previous = React.createElement(props.providers[i].provider, {value: props.providers[i].value}, previous);
   }
   return previous;
}

그런 다음 내 최상위 제공 구성 요소에서 :

public render() {
      return (
         <MultiProvider
            providers={[
               provider(Context1.Provider, this.context1),
               provider(Context2.Provider, this.context2),
               provider(Context3.Provider, this.context3),
               provider(Context4.Provider, this.context4),
               provider(Context5.Provider, this.context5),
            ]}
         ><AppComponents />
      </MultiProvider>
}

@gaearon

애플리케이션 상단 어딘가에 JSX의 여러 레이어를 중첩해도 나쁜 것은 없습니다.

나는 그런 식으로 주입하기를 원하는 ~ 15 종속성을 가지고 있으며 15 레벨의 들여 쓰기는 나에게 예쁘지 않습니다. :)

@ 0xorial 당신은

const compose = (contexts, children) =>
  contexts.reduce((acc, [Context, value]) => {
    return <Context.Provider value={value}>{acc}</Context.Provider>;
  }, children);

다음과 같이 사용하십시오.

import Context1 from './context1';
import Context2 from './context2';
import Context3 from './context3';
...
import Context15 from './context15';

const MyComponent = (props) => {
  // const value1..15 = ... get the values from somewhere ;

  return compose(
    [
      [Context1, value1],
      [Context2, value2],
      [Context3, value3],
      ...
      [Context15, value15],
    ],
    <SomeSubComponent/>
  );
}

이 경우를 처리하는 라이브러리를 과거에 작성했습니다 : https://github.com/disjukr/join-react-context

이것은 애플리케이션에서 항상 일어나는 일입니다. useContext 은 구성 요소의 컨텍스트 데이터 _ 소비 _에 적합하지만 여러 공급자가있는 앱에서 컨텍스트를 _ 제공 _해야하는 경우에는 그리 좋지 않습니다.

@alesmenzelsocialbakers 솔루션의 폐쇄 대안은 다음과 같습니다.

const composeProviders = (...Providers) => (Child) => (props) => (
  Providers.reduce((acc, Provider) => (
    <Provider>
      {acc}
    </Provider>
  ), <Child {...props} />)
)

const WrappedApp = composeProviders(
  ProgressProvider,
  IntentsProvider,
  EntitiesProvider,
  MessagesProvider
)(App)

ReactDOM.render(<WrappedApp />, document.getElementById('root'));

단점은 각각의 특정 Provider 구성 요소를 작성해야한다는 것입니다.
예:

export const ProgressProvider = ({ children }) => {
  const [progress, setProgress] = useState(0)

  return (
    <ProgressContext.Provider value={{ progress, setProgress }}>
      {children}
    </ProgressContext.Provider>
  )
}

서비스 구성이 더 나은 상태 관리 라이브러리 를 만들었습니다. 다음은 공급자 지옥을 피하는 데모입니다 . 자유롭게 시도하거나 소스 (100 줄의 코드)를 읽어보세요!

컨텍스트 공급자를 수집하는 "범위"개체를 도입하여 다음을 수행합니다.

• 서비스는 동일한 범위에 있는지 여부에 따라 격리되거나 구성 될 수 있습니다.
  
  
  
  • 서비스는 동일한 구성 요소에 있음에도 불구하고 동일한 범위에서 이전 서비스를 사용할 수 있습니다.
  
  
• 범위에 의해 수집 된 모든 공급자는 공급자 지옥을 피하면서 한꺼번에 제공 될 수 있습니다.

나도 이것에 균열이 생겼다. 이것은 잘 작동하는 것 같습니다.

const composeWrappers = (
  wrappers: React.FunctionComponent[]
): React.FunctionComponent => {
  return wrappers.reduce((Acc, Current): React.FunctionComponent => {
    return props => <Current><Acc {...props} /></Current>
  });
}

사용법은 다음과 같습니다.

const SuperProvider = composeWrappers([
    props => <IntlProvider locale={locale} messages={messages} children={props.children} />,
    props => <ApolloProvider client={client}>{props.children}</ApolloProvider>,
    props => <FooContext.Provider value={foo}>{props.children}</FooContext.Provider>,
    props => <BarContext.Provider value={bar}>{props.children}</BarContext.Provider>,
    props => <BazContext.Provider value={baz}>{props.children}</BazContext.Provider>,
  ]);
  return (
    <SuperProvider>
      <MainComponent />
    </SuperProvider>
  );

이 도우미를 npm 라이브러리 react-compose-wrappers 로도 게시했습니다.

다음은 인증 된 사용자를 필요한 구성 요소로 전달하는 방법을 보여줍니다.

내 응용 프로그램에 대해 하나의 상태를 만들기로 결정했습니다. State.js 파일에서 초기 상태, 컨텍스트, 감속기, 공급자 및 후크를 설정했습니다.

import React, { createContext, useContext, useReducer } from 'react';

const INITIAL_STATE = {}

const Context = createContext();

const reducer = (state, action) => 
  action 
    ? ({ ...state, [action.type]: action[action.type] }) 
    : state;

export const Provider = ({ children }) => (
  <Context.Provider value={ useReducer(reducer, INITIAL_STATE) }>
    { children }
  </Context.Provider>
);

const State = () => useContext(Context);

export default State;

그런 다음 index.js 파일에서 공급자에 내 앱을 래핑했습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from './State';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

구성 요소에서 상태를 사용하기 위해 후크를 사용할 수 있습니다. 디스패치를 ​​사용하여 상태를 업데이트 할 수도 있습니다. 예를 들어 사용자를 얻거나 설정하려는 경우.

import React, {useEffect} from 'react';
import State from './State'

const ExampleComponent = () => {
  const [{ user }, dispatch] = State(); 

  useEffect(() => {
    const getUser = async () => {
      const data = await fetch('http://example.com/user.json');  // However you get your data
      dispatch({ type: 'user', user: data });
    }
    getUser();
  }, [dispatch]);

  // Don't render anything until user is retrieved
  // The user is undefined since I passed an empty object as my initial state
  if(user === undefined) return null; 

  return(
    <p>{user.name}</p>
  );
}

export default ExampleComponent;

이런 식으로 많은 추가 컨텍스트를 추가하지 않고 필요한 방식으로 상태를 구축 할 수있는 자유를 제공하고 공급자의 깊은 둥지를 피하는 데 도움이된다고 생각합니다.

곧 출시 될 Hooks API는 컨텍스트를 소비하는 다른 방법을 제공합니다.

https://reactjs.org/docs/hooks-reference.html#usecontext

클래스 구성 요소에서 어떻게 사용합니까?

곧 출시 될 Hooks API는 컨텍스트를 소비하는 다른 방법을 제공합니다.
https://reactjs.org/docs/hooks-reference.html#usecontext

클래스 구성 요소에서 어떻게 사용합니까?

클래스를 작성하지 않고 다양한 React 기능을 활용하는 데 후크가 사용되지 않습니까?
즉, 다양한 후크가 수행하는 모든 것이 이미 클래스에 존재합니다. 편리한 구문 및 사용 API에 대해 이야기하는 경우 반응이 클래스에서 기능 구성 요소로 이동하므로 함수 및 후크에 오신 것을 환영합니다)

vue3와 유사한 API를 제공하여 문제를 해결하는 패키지를 만들었습니다.

https://github.com/TotooriaHyperion/react-multi-provide

• 반응 컨텍스트에 추가 뷰 트리가 필요한 문제를 해결합니다.
• 또한 주입 된 것의 반응성을 보존합니다
• 공급자 간의 프랙탈
• WeakMap을 사용하여 종속성 저장
• 더 나은 타이프 스크립트 지원, 종속성 주입 및 디버그 경험을 달성하기 위해 개체 래핑 기호를 사용합니다.

주의:

• 데이터 자체보다는 데이터에 대한 액세스를 제공 컨텍스트의 반응성에 크게 의존 하지 않는 것이 좋습니다. @gaearon 이 너무 많은 컨텍스트를 구독하지 않는 것에 대해 말한 것은 옳았습니다. 그러나 그는 컨텍스트의 반응성에 의존하여 데이터 구독을 해결하는 것이 잘못된 패턴이라고 언급하지 않았습니다. 따라서 올바른 방법은 여러 컨텍스트를 사용하지 않고 하나의 컨텍스트에서 종속성을 제공하는 것 입니다. 그 동안 컨텍스트 를 가능한 한 안정적으로 유지하세요.
• 따라서 더 나은 API를 원하면 직접 처리해야하며 API 프랙탈을 만들어야합니다. 그것이 내 패키지의 목적입니다.

Outer.tsx

import React, { useMemo } from "react";
import { Providers, useCreateContexts, useProvide } from "../..";
import { createService, ServiceA } from "./service";

export const Outer: React.FC = ({ children }) => {
  const contexts = useCreateContexts();
  const service = useMemo(createService, []);
  useProvide(contexts, ServiceA.id, service);
  return <Providers contexts={contexts}>{children}</Providers>;
};

Inner2.tsx

import React from "react";
import { useContexts, useReplaySubject } from "../..";
import { ServiceA } from "./service";

export const Inner2: React.FC = () => {
  const [
    {
      state$,
      actions: { inc, dec },
    },
  ] = useContexts([ServiceA.id]);
  const count = useReplaySubject(state$);
  return (
    <>
      <p>{count}</p>
      <div>
        <button onClick={inc}>Increment</button>
        <button onClick={dec}>Decrement</button>
      </div>
    </>
  );
};

방법은 다음과 같습니다.

interface Composable {
    (node: React.ReactNode): React.ReactElement
}

const composable1: Composable = (node)=>{
      return <someContext.Provider>{node}</someContext.Provider>
}

function Comp({children}:{children?:React.ReactNode}){
       return pipe(
             composabl1, composabl2, composable3
       )(children)
}

rxjs와 같은 많은 인기 라이브러리에서 pipe 함수를 찾을 수 있으며이 파이프 라인과 같은 작업에 대한 여러 언어 수준 제안도 있습니다. 다른 lib를 사용하여 '해결'할 필요가 없습니다.