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>; }
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> );
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!