React는 요소 렌더링, 노드 조회, 이벤트 처리 등 브라우저와 무관한DOM 시스템을 실현했다.

1. ReactDOM

React v0.14부터 정부는 DOM과 관련된 조작을 React에서 분리하여 단독의react-dom 라이브러리를 구성하여 React가 더 많은 단말기를 호환할 수 있도록 한다.react-dom 라이브러리를 도입한 후에 전역 대상인 ReactDOM을 호출할 수 있다. 비록 이전 장에서 이 대상을 여러 차례 사용했지만 너무 많은 설명을 하지 않았기 때문에 이 부분은 이를 중점적으로 분석할 것이다.
ReactDOM에는 unmountComponentAtNode(),findDOMNode(),createPortal(),render() 등 몇 가지 방법만 포함돼 있는데, 이 중 2편에서는 render()의 기능을 소개하고, 4편에서는 unmountComponentAtNode() 방법으로 DOM에 마운트된 구성 요소를 제거하는 것을 언급했다.다음은 나머지 두 가지 방법을 설명할 것이다.
1)findDOMNode()
구성 요소가 페이지의 실제 DOM에 렌더링되면findDOMNode () 방법으로 생성된 DOM 요소를 얻을 수 있으며, 읽기 값, 사이즈 계산 등 작업을 완성할 수 있습니다.
findDOMNode()는 마운트된 구성 요소만 가져올 수 있고 함수 구성 요소에는 사용할 수 없습니다.구성 요소의 생명 주기에는 componentDidMount () 와componentDidUpdate () 두 개의 리셋 함수에만 존재할 수 있으며, 다른 곳에서 호출하면 다음과 같은 오류가 발생합니다.

class Btn extends React.Component {
  render() {
    ReactDOM.findDOMNode(this);        //   
    return  ;
  }
  componentDidMount() {
    ReactDOM.findDOMNode(this);        // 
  }
}

위의 예에서 this는 Btn 구성 요소의 실례를 가리키며,this를findDOMNode () 방법에 전달한 후에 요소를 얻었다.구성 요소의render ()가 null이나false를 되돌려준다면findDOMNode () 는null만 되돌려줍니다.
2)createPortal()
React v16에서는 어셈블리를 모 어셈블리 이외의 DOM 노드로 렌더링할 수 있는 Portal 기능이 추가되었습니다.이 기능은 용기를 꺼내야 하는 장면에 적용됩니다. 예를 들어 페이지 내의 맞춤형 탄창을 만드는 것입니다.
React에서 Portal 기능을 사용하려면 ReactDOM의 새로운 방법을 호출해야 합니다:createPortal ().이 방법은 2개의 매개 변수를 수신할 수 있는데 첫 번째는 렌더링 가능한 React 서브 요소, 예를 들어 문자열, React 요소 그룹 등이다.두 번째는 마운트할 컨테이너인 DOM 요소입니다.이 방법의 구체적인 사용에 관해서는 아래의 예시를 참고할 수 있다.

class Btn extends React.Component {
  render() {
    return ReactDOM.createPortal(this.props.children, document.body);
  }
}
ReactDOM.render(
 , document.getElementById("container"));

위의 render () 방법에서 ReactDOM을 호출했습니다.createPortal () 은 id 속성이'container'인 요소가 아닌 원소에 원소를 마운트합니다.

2. Refs

Refs는 렌더() 방법에서 생성된 구성 요소 실례와 DOM 요소를 읽을 수 있는 접근 방식으로 요소의 초점, 애니메이션 트리거, 제3자 DOM 라이브러리 통합 등을 처리하는 데 자주 사용된다.구성 요소의 생명 주기 중, Refs를 유효하게 하려면,componentDidMount () 와componentDidUpdate () 두 개의 리셋 함수에 넣어야 합니다.Refs는 일부 장면에 편리함을 가져다 줄 수 있지만, React가 props를 통해 데이터를 전달하는 전형적인 데이터 흐름을 파괴하기 때문에 Refs를 최대한 피해야 한다.
만약에 Refs의 기능을 사용하려면 React 요소의ref 속성을 설정해야 한다. 그 값은 대상, 리셋 함수와 문자열일 수 있다. 다음은ref 속성의 이 세 가지 값을 설명할 것이다.
1) 객체
이곳의 대상은 React입니다.createRef () 방법의 반환값은current 속성을 포함하고, 이 속성은 읽을 구성 요소의 실례나 DOM 요소를 가리킨다.다음 예제에서는 ref 속성과 React를 보여 줍니다.createRef() 메서드의 조합 프로세스

class Btn extends React.Component {
  constructor(props) {
    super(props);
    this.myBtn = React.createRef();
  }
  render() {
    return this.myBtn}> ;
  }
  componentDidMount() {
    let btn = this.myBtn.current;
    console.log(btn);         // 
  }
}

먼저 어셈블리의 구조 함수에서 React를 호출합니다.createRef();되돌아오는 값을this에 부여합니다.myBtn, 이렇게 하면 구성 요소 내부의 임의의 위치에서 이 대상을 사용할 수 있습니다.그리고 this.myBtn은 요소의 ref 속성 값이 됩니다.마지막으로componentDidMount()에서current 속성의 값을 성공적으로 읽을 수 있으며 Refs식 접근이 완료되었습니다.
2) 콜백 함수
이 리셋 함수는 구성 요소가 마운트될 때, 매개 변수의 값은 구성 요소의 실례나 DOM 요소입니다.구성 요소가 마운트 해제되었을 때, 매개 변수의 값은null입니다.

class Btn extends React.Component {
  render() {
    return (
       { this.myBtn = btn }}> 
    );
  }
  componentDidMount() {
    let btn = this.myBtn;
    console.log(btn);           // 
  }
}

이전 사용 방식과 가장 큰 차이점은 리액션을 해제한 것이다.createRef () 방법의 의존, 리셋 함수에서this에 직접 인자를 부여합니다.myBtn, current 속성을 다시 호출하지 않아도 원하는 결과를 얻을 수 있습니다.
3) 문자열
ref 속성의 값은 다음 코드의 "myBtn"을 통해this를 통해 문자열일 수도 있습니다.refs.myBtn은 원하는 어셈블리 인스턴스나 DOM 요소에 액세스할 수 있습니다.

class Btn extends React.Component {
  render() {
    return  ;
  }
  componentDidMount() {
    let btn = this.refs.myBtn;
    console.log(btn);           // 
  }
}

그러나 정부는 이미 이런 문법을 추천하지 않아 향후 버전에서 제거될 수 있으므로 리셋 함수로 바꾸는 것을 권장한다.
4) 장면 사용
ref 속성은 이전의 예시와 같이 DOM 요소에 적용될 뿐만 아니라 클래스 구성 요소에서ref 속성을 사용할 수 있다. 아래 코드와 같다.

class Btn extends React.Component {
  render() {
    return  ;
  }
}
class Container extends React.Component {
  render() {
    return  { this.myBtn = btn }}> ;
  }
  componentDidMount() {
    let btn = this.myBtn;
    console.log(btn);           //Btn 
  }
}

Container는 Btn의 부모 구성 요소로,render () 방법에서, 리셋 함수를 통해 Btn 구성 요소의 실례를this에 부여합니다.myBtn.
함수 구성 요소는 실례가 없기 때문에ref 속성을 추가할 수 없습니다.
5) 서브어셈블리의 DOM 요소
부모 구성 요소에서 하위 구성 요소의 DOM 요소에 접근하려면 ref 속성만으로는 실현할 수 없습니다. 왜냐하면 ref 속성은 하위 구성 요소의 실례만 얻을 수 있기 때문입니다.그러나 간접적인 방식으로 이 수요를 실현할 수 있다. 그것이 바로ref속성과ReactDOM이다.findDOMNode()가 사용됩니다.다음은 장면의 Btn과 Container 두 구성 요소를 사용한 이전 섹션입니다. 코드는 수정된 부분만 표시하고 나머지는 생략했습니다.

class Container extends React.Component {
  componentDidMount() {
    let btn = this.myBtn;
    let dom = ReactDOM.findDOMNode(btn);
    console.log(dom);         // 
  }
}

componentDidMount () 방법에서ReactDOM이 호출되었습니다.findDOMNode() - 서브어셈블리가 소유한 DOM 요소를 가져옵니다.

3. Fragments

JSX 구조는 한 가지 제한이 있는데 그것이 바로 가장 바깥쪽에 반드시 하나의 원소로 감싸야 한다는 것이다. 설령 이것이 불필요한 원소라고 할지라도 덧붙여야 한다.예를 들어 하나의 원소에 하나의 원소 집합을 마운트하는 것은 다음과 같다.

class Btns extends React.Component {
  render() {
    return (
      

        
1
        
2
        
3
      
    );
  }
}

페이지에 렌더링된 DOM은 아래에 표시되며 여기서 요소는 작동하지 않습니다.

<ul id="container">
  <div>
    <li>1li>
    <li>2li>
    <li>3li>
  div>
ul>

이러한 무의미한 출력을 피하기 위해 React는 다음과 같은 코드로 구성된 Fragments를 도입했다.가장 바깥쪽 요소의 시작과 끝 탭을 각각 <>과 >로 바꾸면 DOM에 추가 요소를 추가할 필요가 없습니다.

class Btns extends React.Component {
  render() {
    return (
      <>
        

1

2

3

>
);
}
}
1)React.Fragment
<>과>는 최종적으로React로 컴파일됩니다.Fragment 구성 요소의 시작과 끝 레이블, 즉 전자는 후자의 문법 사탕이다.다음 코드와 이전 Fragments의 예는 동일합니다.

class Btns extends React.Component {
  render() {
    return (
      
        
1
        
2
        
3
      
    );
  }
}

Fragments에 Keys 표식(즉 키 속성을 정의하는 것)을 추가하려면 React만 사용할 수 있습니다.Fragment 어셈블리는 서브요소를 패키지합니다.키는 React입니다.현재 Fragment 어셈블리에서 사용할 수 있는 유일한 속성입니다.