react는 의존성 주입을 구현할 수 있습니다. 구현 방법: 1. "function Welcome(props){return...}"과 같은 종속성 주입을 구현하기 위해 props를 사용합니다. 2. 종속성 주입을 구현하기 위해 컨텍스트를 사용합니다. 3. InversifyJS와 같은 종속성 주입 라이브러리를 사용하여 종속성 주입을 구현합니다. .
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
다음의 일반적인 코드는 실제로 종속성 주입의 아이디어를 적용합니다.
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를 통해 원격 데이터를 얻습니다. 그러나
InversifyJS
InversifyJS는 강력하고 가벼운 종속성 주입 라이브러리이며 사용이 매우 간단하지만 React 구성 요소와 함께 사용할 때 여전히 몇 가지 문제가 있습니다.
InversifyJS는 기본적으로 생성자 주입을 사용하지만 React에서는 개발자가 구성 요소의 생성자를 확장하는 것을 허용하지 않습니다. 이 문제를 해결하는 방법을 알아보기 위해 예를 들어 보겠습니다.inversify-inject- decorators
이 도구 라이브러리는 주로 지연 주입을 제공할 수 있는lazyInject와 같은 메서드를 제공합니다. 즉, 개체 초기화 중에 그럴 필요가 없습니다. 종속성을 제공하기 위해 이 라이브러리는 생성자를 변경할 수 없을 때 유용합니다.
게다가 문자 그대로의 게으름 외에도 또 다른 매우 중요한 기능은 InversifyJ를 React와 같은 클래스 인스턴스 생성을 제어하는 모든 라이브러리나 프레임워크에 통합할 수 있다는 것입니다.inversify-react
inversify-react는 종속성 주입만 수행하는 라이브러리입니다. React Context.Provider를 사용하는 것과 마찬가지로 이 라이브러리에서 Provider를 가져올 수도 있습니다.
react-inversify
이름은 이전 라이브러리와 매우 유사하지만 두 라이브러리의 방법은 다릅니다. 객체는 구성 요소 내부에서 인스턴스화되지 않고 속성으로 전달되므로 React 아이디어에 더 가깝습니다.
추천 학습: "react 비디오 튜토리얼
"위 내용은 React가 의존성 주입을 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!