원생React 구성 요소 간의 데이터 전송은 주로 두 가지 키워드: 속성(props)과 상태(state)에 의존한다.모든 구성 요소는 하나의 대상이고props는 대상의 속성이며 구성 요소의 대상은props를 통해 전달할 수 있다.React의 핵심 사상은 구성 요소화된 사상이고 응용은 구성 요소로 이루어진다. 구성 요소에서 가장 중요한 개념은 State(상태)이다. State는 구성 요소의 UI 데이터 모델로 구성 요소가 렌더링될 때의 데이터 근거이다.state와props의 가장 큰 차이점은props는 변할 수 없고state는 변할 수 있다는 것이다.구체적인 내용은 뒤에 자세히 설명할 것이다.
원본React 구성 요소 간의 데이터 전달 장면은 다음과 같은 네 가지로 나눌 수 있다. - 구성 요소 내부의 데이터 전송-'모 구성 요소'에서'모 구성 요소'로 전송-'모 구성 요소'에서'모 구성 요소'로 전송-'형제 구성 요소'간의 전송
1. 구성 요소 내부의 데이터 전송   은 초학 과정의 프로젝트 개발에서 DOM 조작을 시도하려는 충동이 자주 발생한다. 대부분의 경우 이런 시도는 잘못된 것이지만 어떤 때는 DOM의 값을 가져와서 조작해야 한다.예를 들어 단추를 눌렀을 때 이벤트를 터치해서 input 텍스트 상자에 초점을 맞춥니다.jQuery 개발자의 첫 번째 반응은 button에 클릭 이벤트를 연결하고 이벤트에서 $('select ') 를 통해 실행할 노드를 가져와 노드에 초점을 맞추는 것입니다.그러나 리액트에서는 이런 조작이 허용되지 않는다. 리액트에서는 어떻게 해야 하는가?
React Refs 속성:

import React, { Component } from 'react';

class MyComponent extends Component({
  handleClick = () => {
    //   DOM API  
    this.refs.myInput.focus();
  },
  render: function() {
    //    DOM  ，ref   this.refs
    return (
      

        
        
      
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById('example')
);

우리는 위의 코드에서 그 중의ref가 기능적으로 표지부(id)의 역할을 하는this를 볼 수 있다.refs.myInput.focus () 에도 문서가 있습니다.getElementById(‘myInput’).포커스 맛.
  위의 조작을 우리도React 폼 이벤트라고 부른다. React 폼 이벤트에는ref가 관건적인 역할을 하는 것 외에 또 다른 관건적인 매개 변수인'이벤트'가 있다.예를 들어, 나는 텍스트 상자 안의 내용을 실시간으로 가져와서 판단을 하고, 어떤 조건이 충족될 때 다른 사건을 촉발해야 한다.이럴 때 이 관건적인 인자 '이벤트' 를 사용해야 합니다.
React 양식 이벤트-event 매개 변수:

class MyComponent extends Component{
    handleChange = (event) => {
        if(event.target.value === 'show'){
            console.log(this.refs.showText);
        }
    };
    render(){
        return(
            

                
                
 
            

        )

    }
}
export default MyComponent;

 
위의 실례를 통해 이루어진 효과는 이벤트를 통해 이루어진 것이다.target.value는 현재 input의 내용을 가져옵니다. input에 입력한 내용이 show일 때, 컨트롤러는ref를 showText의 전체 노드 내용으로 출력합니다.이 실례에서 우리는 이벤트가 기본 매개 변수로서 대응하는 노드의 내용을 읽는 것을 보았다.
  따라서 구성 요소 내부에서 관련된DOM 조작 데이터 전달은 주로 이 두 가지 방식이고 서로 다른 장면에 따라 서로 다른 방식을 선택할 수 있다.ref는 모든 구성 요소 요소에 적용되지만 ref는 정상적인 상황에서 사용하는 것을 추천하지 않습니다. 다음에state를 통해 구성 요소 상태를 관리하고 DOM의 직접적인 조작을 피하는 것을 소개합니다.
2.'부모 구성 요소'가'서브 구성 요소'에 값을 전달한다.'부모 구성 요소와 서브 구성 요소 간의 통신은 보통props를 사용한다.구체적으로 다음과 같다.

import React,{ Component } from 'react'

class ChildComponent extends Component{
    render (){
        return (
            

                
{this.props.title}
                {this.props.content}
            
        )
    }
}
class ParentComponent extends Component {
    render (){
        return (
            

                
                
 
            
        )
    }
}

export default ParentComponent;

위의 예는 부모 구성 요소가 하위 구성 요소에 두 개의 props 속성을 전달하는 것을 보여 줍니다. 각각 title과 콘텐츠이고, 하위 구성 요소는this를 통과합니다.props는 대응하는 두 가지 속성을 가져와 보여줍니다. 이 과정은 아버지와 하위 구성 요소 간의 데이터 상호작용 방식입니다.그러나 예를 들어 프로포즈의 값은 변하지 않는다. 아버지가 자식에게 어떤 프로포즈 내용을 전달하면 어떤 사용만 받아들일 수 있고 자식에서 다시 값을 부여할 수 없다.
3. 서브어셈블리에서 모 피쳐 어셈블리로 값을 전달합니다. 이 예에서는 관리 어셈블리 상태의state를 도입하여 초기화합니다.구체적으로 다음과 같다.

import React, { Component } from 'react';
// 
class Child extends Component {
    render(){
        return (
            

                 ：
            
        )
    }
}
// ， event.target.value 
class Parent extends Component{
    constructor(props){
        super(props);
        this.state = {
            email:''
        }
    }
    handleEmail = (event) => {
        this.setState({email: event.target.value});
    };
    render(){
        return (
            

                
 ：{this.state.email}
                
            
        )
    }
}

export default Parent;

위의 예를 통해 알 수 있듯이 '하위 구성 요소' 가 '부모 구성 요소' 에게 전달되는 데이터도 사실 매우 간단하다. 요약하면react에서state가 바뀌어야 구성 요소가 업데이트된다.아버지는state를 작성하고 이state의 함수를 처리하며 함수 이름을props 속성 값의 형식으로 아들에게 전달하고 아들은 아버지의 함수를 호출하며state변화를 일으킨다.서브어셈블리는 모 어셈블리 앞에 써야 합니다.
본 예시에서도state는 setState를 통해 다시 값을 부여할 수 있기 때문에state는 가변적이며 특정한 시간대의 구성 요소 상태를 나타낸다.
4. 형제 어셈블리 사이의 값 전달\두 어셈블리가 모/자 관계가 아니지만 동일한 모 어셈블리가 있는 경우 이를 형제 어셈블리라고 합니다.엄밀히 말하면 실제적으로 React는 형제 간의 데이터를 직접 귀속할 수 없다. React의 데이터 귀속은 단방향이기 때문에 React의 상태를 제어할 수 있는 범위에 놓을 수 있다.특수한 응용 장면에서 데이터를 부모 구성 요소에 마운트하고 두 개의 구성 요소로 공유할 수 있다. 만약에 구성 요소가 데이터 렌더링이 필요하다면 부모 구성 요소가props를 통해 이 구성 요소에 전달한다.만약 구성 요소가 데이터를 바꿔야 한다면, 부모 구성 요소는 데이터를 바꾸는 리셋 함수를 이 구성 요소에 전달하고, 대응하는 이벤트에서 호출합니다.이로써 형제 구성 요소 간의 데이터 전달을 실현한다.

import React, { Component } from 'react';
// 
class Child extends Component {
    render(){
        return (
            

                 ：
            
        )
    }
}
// 
class ChildBrother extends Component {
    render(){
        return (
            

                 :{this.props.value}
            
        )
    }
}
// ， event.target.value 
class Parent extends Component{
    constructor(props){
        super(props);
        this.state = {
            email:''
        }
    }
    handleEmail = (event) => {
        this.setState({email: event.target.value});
    };
    render(){
        return (
            

                
 ：{this.state.email}
                
                
            
        )
    }
}

export default Parent;

위의 예에서는child 구성 요소의 값이 바뀌면 부모 구성 요소의state에 저장된 다음props를 통해 형제 구성 요소인child Brother에 전달합니다.이로써 형제 구성 요소 간의 데이터 전달을 실현한다.