React가 의존성 주입을 구현할 수 있나요?-프런트엔드 Q&A-php.cn

React가 의존성 주입을 구현할 수 있나요?

WBOY

풀어 주다： 2022-04-27 11:24:01

원래의

2341명이 탐색했습니다.

react는 의존성 주입을 구현할 수 있습니다. 구현 방법: 1. "function Welcome(props){return...}"과 같은 종속성 주입을 구현하기 위해 props를 사용합니다. 2. 종속성 주입을 구현하기 위해 컨텍스트를 사용합니다. 3. InversifyJS와 같은 종속성 주입 라이브러리를 사용하여 종속성 주입을 구현합니다. .

React가 의존성 주입을 구현할 수 있나요?

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React는 종속성 주입을 구현할 수 있나요?

다음의 일반적인 코드는 실제로 종속성 주입의 아이디어를 적용합니다.

1. 종속성 주입을 허용합니다

function welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

로그인 후 복사

welcome 구성 요소는 props를 받은 다음 html을 생성합니다. 놀라지 마세요. 가장 일반적으로 사용되는 props는 실제로 종속성 주입 아이디어를 적용합니다.

2. 컨텍스트를 사용하는 것은 종속성 주입을 구현하는 또 다른 방법입니다.

function counter() {
  const { message } = useContext(MessageContext);
  return <p>{ message }</p>;
}

로그인 후 복사

컨텍스트는 구성 요소 트리를 따라 전달되므로 구성 요소 내부의 후크를 사용하여 추출할 수 있습니다.

3. jsx

const ReviewList = props => ( 
  <List resource="/reviews" perPage={50} {...props}> 
    <Datagrid rowClick="edit"> 
      <DateField source="date" /> 
      <CustomerField source="customer_id " /> 
      <ProductField source="product_id" /> 
      <StatusField source="status" /> 
    </Datagrid> 
  </List> 
);

로그인 후 복사

perPage 매개변수만 사용하여 종속성 주입을 구현할 수도 있습니다. 그러면 해당 구성 요소는 REST API를 통해 원격 데이터를 얻습니다.

그러나 컴포넌트는 데이터를 직접 렌더링하지 않으며, 반대로 데이터 렌더링 책임을 하위 컴포넌트인 에 넘깁니다. 구성 요소의 렌더링은 에 따라 달라지며, 는 이 종속성을 설정하는 호출자입니다.

그러나 이러한 전략은 소규모 프로젝트에 도움이 될 수 있습니다. 일부 대규모 프로젝트에서는 이러한 기본 애플리케이션 외에도 종속성 주입을 더 효과적으로 지원해야 하는 경우가 많습니다.

React의 종속성 주입 지원을 확장하는 몇 가지 라이브러리를 살펴보겠습니다.

InversifyJS

InversifyJS는 강력하고 가벼운 종속성 주입 라이브러리이며 사용이 매우 간단하지만 React 구성 요소와 함께 사용할 때 여전히 몇 가지 문제가 있습니다.

InversifyJS는 기본적으로 생성자 주입을 사용하지만 React에서는 개발자가 구성 요소의 생성자를 확장하는 것을 허용하지 않습니다. 이 문제를 해결하는 방법을 알아보기 위해 예를 들어 보겠습니다.

inversify-inject- decorators

이 도구 라이브러리는 주로 지연 주입을 제공할 수 있는lazyInject와 같은 메서드를 제공합니다. 즉, 개체 초기화 중에 그럴 필요가 없습니다. 종속성을 제공하기 위해 이 라이브러리는 생성자를 변경할 수 없을 때 유용합니다.

게다가 문자 그대로의 게으름 외에도 또 다른 매우 중요한 기능은 InversifyJ를 React와 같은 클래스 인스턴스 생성을 제어하는 모든 라이브러리나 프레임워크에 통합할 수 있다는 것입니다.

inversify-react

inversify-react는 종속성 주입만 수행하는 라이브러리입니다. React Context.Provider를 사용하는 것과 마찬가지로 이 라이브러리에서 Provider를 가져올 수도 있습니다.

react-inversify

이름은 이전 라이브러리와 매우 유사하지만 두 라이브러리의 방법은 다릅니다. 객체는 구성 요소 내부에서 인스턴스화되지 않고 속성으로 전달되므로 React 아이디어에 더 가깝습니다.