React 를 처음 시작하면 React 의 단방향 데이터 흐름 특성으로 인해 구성 요소 간 통신에 문제가 발생할 수 있습니다. 다음 문장 에서 자세한 소개 를 해 드릴 것 입니다. 시작하기 전에 먼저 그림 을 한 장 보세요.
반응 구성 요소 통신
구성 요소 간 통신이 필요한 몇 가지 상황.
모 어셈블리와 자 어셈블리가 통신합니다.
서브어셈블리는 모 피쳐 어셈블리와 통신합니다.
크로스 레벨 구성 요소 통신
중첩된 관계가 없는 구성 요소 간의 통신입니다.
1. 모 피쳐 어셈블리와 자 피쳐 간의 통신.
도달 데이터 흐름은 단방향이며 모 어셈블리와 자 어셈블리 간의 통신도 가장 일반적입니다. 모 피쳐 어셈블리는 props 를 통해 필요한 정보를 서브어셈블리에 전달합니다.
Child.jsx
"React" 에서 react 가져오기
Prop-types 에서 PropTypes 가져오기
기본 함수 1 차 하위 구성요소 ({name }) {
Return & lth1> 안녕하세요, {name}</h1> 을 눌러 섹션을 인쇄할 수도 있습니다
}
Child.propTypes = {
Name:prop types. string. is 가 필요합니다.
}
Parent.jsx
"React" 에서 react, {Component }；;
' 에서 1 차 하위 구성요소를 가져옵니다. /child';
클래스 상위 확장 구성 요소 {
Render() {
반환 (
& ltdiv & gt
& ltchild name = "Sara "/& gt；;
& lt/div & gt；;
);
}
}
기본 상위 내보내기 ：
2. 서브어셈블리가 모 피쳐 어셈블리와 통신합니다.
콜백 함수 사용
사용자 정의 이벤트 메커니즘 사용
콜백 기능
구현은 하위 구성 요소에서 구성 요소 숨기기 버튼을 클릭하여 자신의 기능을 숨길 수 있습니다.
List3.jsx
"React" 에서 react, {Component }；;
Prop-types 에서 PropTypes 가져오기
범주 목록 3 확장 구성 요소 {
정적 속성 유형 = {
Hideconponent: proptypes.func.is 가 필요합니다.
}
Render() {
반환 (
& ltdiv & gt
하하, 저는 목록 3 입니다
& ltbuttononclick = {this.props.hideconfonent} > List3 구성 요소 숨기기
& lt/div & gt；;
);
}
}
기본 목록 3 내보내기
응용 프로그램, jsx
"React" 에서 react, {Component }；;
' 에서 목록 3 을 가져옵니다. /components/list3';
기본 클래스 응용 프로그램 확장 구성 요소 내보내기 {
생성자 (... args) {
슈퍼 (... args);
This.state = {
IsShowList3: 거짓,
}
}
Show component =()= & gt；; {
This.setState({
IsShowList3: 네,
});
}
Hideconfonent =()= & gt；; {
This.setState({
IsShowList3: 거짓,
});
}
Render() {
반환 (
& ltdiv & gt
& ltbuttononclick = {this.show component} > 표시 목록 구성 요소
{
This.state.isShowList3?
& ltlist3 hideconfonent = {this.hideconfonent}/>
다음 중 하나를 수행합니다.
비어 있습니다
}
& lt/div & gt；;
);
}
}
구현 방법을 살펴보면 콜백 함수가 내부 상태를 변환하는 전통적인 함수이기 때문에 일반적으로 setState 및 콜백 함수가 쌍으로 나타나는 기존 콜백 함수와 동일하다는 것을 알 수 있습니다.
3. 크로스 레벨 구성 요소 통신
레이어 구성요소는 소품을 통과합니다.
예를 들어 어셈블리 a 와 어셈블리 b 간에 통신하려면 먼저 어셈블리 a 와 어셈블리 b 의 모 피쳐 어셈블리를 찾아야 합니다. A 는 먼저 c 구성 요소와 통신하고 c 구성 요소는 props 및 b 구성 요소를 통해 통신합니다. 이때 구성 요소 C 가 미들웨어의 역할을 합니다.
컨텍스트 사용
Context 는 어디에서나 액세스할 수 있는 큰 컨테이너처럼 전역 변수입니다. 우리는 소통할 정보를 문맥에 두고 다른 구성 요소에서 자유롭게 얻을 수 있다.
그러나 React 당국은 대량의 컨텍스트를 사용하는 것을 권장하지 않는다. 레이어 전달을 줄일 수는 있지만 구성 요소 구조가 복잡할 때 컨텍스트가 어디서 왔는지 알 수 없습니다. 그리고 문맥은 글로벌 변수이며, 응용혼란을 초래한 주범이다.
컨텍스트 사용
다음 예제의 구성 요소 관계: ListItem 은 List 의 하위 구성 요소이고 List 는 app 의 하위 구성 요소입니다.
ListItem.jsx
"React" 에서 react, {Component }；;
Prop-types 에서 PropTypes 가져오기
클래스 ListItem 확장 구성 요소 {
//서브어셈블리는 컨텍스트를 사용할 것이라고 선언합니다.
정적 컨텍스트 유형 = {
Color: PropTypes.string,
}
정적 속성 유형 = {
값: PropTypes.string,
}
Render() {
Const {value} = this.props
반환 (
& lt 리 스타일 = {{background: this.context.color}} >
& ltspan & gt{ value} & lt/span>.
& lt/ 리>
);
}
}
기본 목록 항목 내보내기
List.jsx
' 에서 ListItem 을 가져옵니다. /listitem';
범주 목록 확장 구성 요소 {
//부모 구성 요소는 컨텍스트를 지원한다고 선언합니다.
정적 childContextTypes = {
Color: PropTypes.string,
}
정적 속성 유형 = {
목록: prop types.array,
}
//제공 함수는 해당 컨텍스트 객체를 반환합니다.
GetChildContext() {
반환 {
색상:' 빨강',
}
}
Render() {
Const {list} = this.props
반환 (
& ltdiv & gt
& ltul & gt
{
List.map((entry, index)= & gt；;
& ltlistitemkey = {`list-$ {index} `} value = {entry.text}/> 그리고,
) 을 참조하십시오
}
& lt/ul & gt；;
& lt/div & gt；;
);
}
}
기본 목록 내보내기
App.jsx
"React" 에서 react, {Component }；;
' 에서 목록을 가져옵니다. /구성 요소/목록';
상수 목록 = [
{
텍스트: "테마 1",
},
{
텍스트: 주제 2,
},
];
기본 클래스 응용 프로그램 확장 구성 요소 내보내기 {
Render() {
반환 (
& ltdiv & gt
& lt 디렉토리
List={list}
/>
& lt/div & gt；;
);
}
}
4. 중첩 관계가없는 구성 요소 통신
사용자 정의 이벤트 메커니즘 사용
ComponentDidMount 이벤트에서 구성 요소 설치가 완료되면 이벤트에 가입합니다. 구성 요소를 제거할 때 componentWillUnmount 이벤트의 이벤트 가입을 취소합니다.
일반적인 게시/가입 모드를 예로 들면 브라우저 버전의 Node.js 이벤트 모듈을 사용하여 구현됩니다.
사용자 정의 이벤트 사용.
다음 예제의 구성 요소 관계: 목록1및 목록 2 는 중첩된 관계가 없고 App 는 상위 구성 요소입니다.
목록 2 의 버튼 중 하나를 클릭하여 목록1의 정보 표시를 변경하는 기능을 구현합니다.
먼저 프로젝트에 이벤트 패키지를 설치해야 합니다.
Npm 설치 이벤트-저장
Src 아래에 새 util 디렉토리를 만들고 그 안에 events.js 를 구성합니다.
[이벤트] 에서 {eventemitter};
기본 새 eventemitter () 내보내기;
목록1.jsx
"React" 에서 react, {Component }；;
방사체 가져오기' ../util/events' 에서
범주 목록 확장 구성 요소 {
시공사 {
슈퍼 (소품);
This.state = {
메시지: "목록 1",
}
}
Componentidmount(){
//구성 요소가 로드된 후 사용자 정의 이벤트를 선언합니다.
This.eventemitter = emitter.addlistener ('changemessage', (message)= & gt；; {
This.setState({
뉴스,
});
});
}
ComponentWillUnmount() {
Emitter.removelistener (this.eventemitter);
}
Render() {
반환 (
& ltdiv & gt
{this.state.message}
& lt/div & gt；;
);
}
}
기본 목록 내보내기
List2.jsx
"React" 에서 react, {Component }；;
방사체 가져오기' ../util/events' 에서
범주 목록 2 확장 구성 요소 {
Handleclick = (message) = > {
Emitter.emit('changeMessage', message);
}
Render() {
반환 (
& ltdiv & gt
& ltbuttononclick = {this.handleclick.bind (this,' list2')} > List 1 구성 요소에 표시되는 정보를 변경하려면 I 를 클릭합니다
& lt/div & gt；;
);
}
}
APP.jsx
"React" 에서 react, {Component }；;
목록 1 을 (를)' 에서 가져옵니다. /components/list1';
' 에서 목록 2 를 가져옵니다. /components/list2';
기본 클래스 응용 프로그램 확장 구성 요소 내보내기 {
Render() {
반환 (
& ltdiv & gt
& ltList 1/>
& ltList2/>
& lt/div & gt；;
);
}
}
사용자 정의 이벤트는 일반적인 게시-가입 모드이며 구성 요소 간 통신은 이벤트 객체에 리스너를 추가하고 이벤트를 트리거하여 수행됩니다.
요약
모 어셈블리와 자 피쳐 간의 통신: props
하위 구성 요소와 상위 구성 요소 간의 통신: 콜백 함수/사용자 정의 이벤트
계층 간 구성 요소 통신: 계층 구성 요소별로 props/context 전달
중첩된 관계가 없는 구성 요소 간 통신: 사용자 정의 이벤트
구성 요소와 통신할 때 주로 비즈니스의 구체적인 요구 사항에 따라 가장 적합한 것을 선택합니다.
비즈니스 논리가 어느 정도 복잡할 경우 Mobx, Redux 등의 상태 관리 도구를 도입하는 것을 고려해 볼 수 있습니다.
요약