반응 의존성 주입 또는 유사합니까?

반응 의존성 주입 또는 유사합니까?

Angular.js에서는 의존성 주입을 사용할 수 있습니다.몇 가지 브라우징을 해봤지만 구현되어 있는 것을 찾을 수가 없어요.리액트도 그런 거 있어요?

반응하라 IoC 지 Angular react 、 DI 컨 、 DI react 、 DI react react react react react react react react react react 。즉, 오브젝트 작성 방법을 알고 종속성을 전달하는 컨테이너가 있는 대신 인스턴스화할 때 컴포넌트에 소품을 전달함으로써 오브젝트를 명시적으로 전달합니다(예:<MyComponent items={this.state.items} />를 참조해 주세요.

의존관계를 소품으로 넘기는 것은 리액트 세계에서는 그리 흔한 일이 아닙니다.소품은 대부분 서비스/스토어가 아닌 컴포넌트에 데이터를 전달하는 데 사용됩니다.그러나 서비스/스토어, 심지어 소품으로서의 컴포넌트를 지나치는 것을 막을 수는 없습니다(또한 문제될 것도 없습니다).

는 리스펙트(Respect)라는 .context컴포넌트 트리 전체의 공유 객체입니다.따라서 최상위 컴포넌트는 서브트리의 컨텍스트에 UserStore, MessageStore 등을 포함하는 오브젝트가 있다고 할 수 있습니다.그러면 컴포넌트 계층의 하위 컴포넌트는 컨텍스트에서 UserStore에 액세스하고 싶다고 말할 수 있습니다.이를 통해 UserStore는 해당 컴포넌트에 액세스할 수 있으며 UserStore를 요청하는 컴포넌트는 컴포넌트가 어떻게 생성/전달되었는지 알 수 없습니다.

DI 컨테이너의 장점이 있습니다.이 컨테이너에서는 오브젝트 작성의 중심이 되어, 한층 더 아래로 건네질 수 있습니다.다음은 콘텍스트에 대한 좋은 소개입니다.https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

콘텍스트는 여전히 React의 문서화되어 있지 않은 기능입니다.이는 곧 출시될 React 버전에서 API가 변경될 수 있다는 것을 의미하기 때문에 문서화될 때까지 이를 간결하게 사용하는 것이 좋습니다.

react-in-pattern에서:

React 구성 요소에서 종속성 주입을 위한 대부분의 솔루션은 컨텍스트에 기반합니다.나는 후드 아래에서 무슨 일이 일어나는지 아는 것이 좋다고 생각한다.이 글을 쓸 때 React 앱을 만드는 가장 인기 있는 방법 중 하나는 Redux입니다.유명한 접속 함수와 프로바이더는 콘텍스트를 사용합니다.

리액션 문서로부터:

콘텍스트는 고도의 실험 기능입니다.API는 향후 릴리즈에서 변경될 가능성이 있습니다.

대부분의 응용 프로그램에서는 컨텍스트를 사용할 필요가 없습니다.특히 React를 이제 막 시작한 경우 컨텍스트를 사용하고 싶지 않을 수 있습니다.콘텍스트를 사용하면 데이터 흐름이 명확하지 않기 때문에 코드를 이해하기 어려워집니다.이는 글로벌 변수를 사용하여 응용 프로그램을 통해 상태를 전달하는 것과 유사합니다.

콘텍스트를 사용할 필요가 있는 경우는, 신중하게 사용해 주세요.

어플리케이션을 구축하든 라이브러리를 구축하든 콘텍스트 사용을 작은 영역으로 격리하고 가능하면 콘텍스트 API를 직접 사용하지 않도록 하십시오.그러면 API가 변경되었을 때 업그레이드가 쉬워집니다.

IoC 컨테이너를 사용한 덕분에 콘텍스트를 사용하지 않고 종속성을 주입할 수 있는 방법을 찾았습니다.

대부분의 용기는 두 가지 종류의 주입을 지원합니다.

• 생성자 주입:"컨스트럭터 주입"을 사용하려면 IoC 컨테이너가 클래스의 인스턴스를 만들 수 있어야 합니다.리액트에서는 컴포넌트는 (클래스가 아닌) 함수일 뿐 IoC 컨테이너에 컴포넌트 인스턴스 작성을 위임할 수 없습니다.즉, IoC 컨테이너로 구동되는 컨스트럭터 주입은 React와 잘 작동하지 않습니다.

• 속성 주입:각 컴포넌트에 의존성을 명시적으로 전달하지 않고 컴포넌트에 전달하는 것이 필요한 경우 React와 잘 동작합니다.

Inversify 사용IoC 컨테이너로서의 JS 및 각 컴포넌트에 명시적으로 의존관계를 전달하지 않고 콘텍스트를 사용하지 않고 컴포넌트에 의존관계를 전달하기 위한 속성 주입 지원:

import { pInject } from "./utils/di";
import { UserStore } from "./store/user";

class User extends React.Component<any, any> {

    @pInject(UserStore)
    private userStore: UserStore; // INJECTED!

    public render() {
        return (
            <h1>{this.userStore.pageTitle}</h1>
        );
    }
}

Inversify와 같은 IOC 컨테이너를 사용하는 주요 장점JS는 콘텍스트를 사용하지 않습니다!

자세한 내용은 이쪽에서 확인하실 수 있습니다.

콘텍스트를 사용하는 것은 별로 좋아하지 않습니다. 왜냐하면 콘텍스트는 아직 실험적인 반응이고 부피가 크기 때문입니다.다음과 같은 DI 프레임워크도 살펴보았습니다만, 각 컴포넌트는 DI 프레임워크의 의존성 주입 방법을 인식할 필요가 있었습니다(즉, 의존성이 데이터 센터 내의this.props.di오브젝트).

콘텍스트를 배제하면 React 컴포넌트에 무언가를 주입하는 표준 방법은 소품을 사용하는 것입니다.소품은 달릴 때 주입된다.React.createElement, 즉, 각 jsx 태그에 대해.그React.createElement함수는 구성요소, 일부 소품 및 일부 하위 요소를 가져와서 React 요소를 반환합니다.예.(component, props, children) -> element.

제가 만든 건createComponent와 거의 같은 시그니처를 가진 기능React.createElement대신 컴포넌트를 반환합니다.(component, props, children) -> component여기 있습니다.

const createComponent = (type, defaultProps = {}, defaultChildren = null) => {
    return ({ children, ...props }) => {
        return React.createElement(
            type,
            { ...defaultProps, ...props },
            children || defaultChildren
        );
    };
};

반환된 컴포넌트는 다음 예시와 같이 프로펠러에 삽입할 수 있습니다.

const Banner = ({ children, TextComponent }) => {
    return <div className="banner">
        <TextComponent>{children}</TextComponent>
    </div>;
}

const SayHelloComponent = ({ ParagraphComponent }) => {
    return <ParagraphComponent>Hello world!</ParagraphComponent>;
}

const ParentComponent = () => {
    const inject = {
        ParagraphComponent: createComponent(Banner, {
            TextComponent: createComponent('span', {
                className: "my-pretty-class",
            }),
        }),
    }

    return <SayHelloComponent {...inject} />;
}

바이올린: https://jsfiddle.net/8971g8s5/3/

이것의 좋은 점은PropTypes각 컴포넌트가 원하는 속성을 명확하게 선언할 수 있도록 합니다.

또한 주입의 수신측은 특별한 구현에 의존하지 않고 React의 일반 소품 시스템에 의존할 필요가 없습니다.따라서 컴포넌트는 사용자가 의존성 주입을 사용하고 있는지 또는 사용하는 방법을 알 필요가 없습니다.사용하는 소품만 신경 쓸 뿐입니다.

언급URL : https://stackoverflow.com/questions/30311081/react-dependency-injection-or-similar