DOM에서 React.render()를 여러 번 사용해도 될까요?

DOM에서 React.render()를 여러 번 사용해도 될까요?

React를 사용하여 DOM 전체에 컴포넌트를 여러 번 추가하고 싶다.이 바이올린은 내가 원하는 것을 보여주며 오류를 발생시키지 않는다.코드는 다음과 같습니다.

HTML:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

이 질문을 본 적이 있는데, 위의 질문을 하면 React 컴포넌트가 서로 간섭하게 될 위험이 있습니다.이 질문에 대한 답변은 서버 측 렌더링을 사용하는 것을 제안합니다.저는 Django 서버 측 렌더링을 사용하고 있기 때문에 이 옵션을 선택할 수 없습니다.

한편, 여러 컴포넌트가 자체 React 인스턴스를 호출하는 것이 아니라 React 라이브러리의 인스턴스가 하나만 마운트되어 있기 때문에 문제가 없을 수 있습니다.

여러 DOM 인스턴스를 사용하는 이 방법은 React를 사용하는 데 문제가 없습니까?

네, 전화해도 괜찮습니다.React.render같은 페이지에 여러 번 표시됩니다.말씀하신 대로 React 라이브러리 자체는 한 번만 로드되지만 각 호출은 다음 주소로 전송됩니다.React.render는 다른 컴포넌트와는 독립적으로 새로운 컴포넌트 인스턴스를 만듭니다.(실제로 이러한 상황은 React로 이행 중인 사이트에서는 드물지 않습니다.이 사이트에서는 페이지의 일부가 다음과 같이 생성됩니다.React.render그렇지 않은 사람도 있습니다.)

페이지 로드 퍼포먼스의 관점에서는 이 방법은 괜찮지만, 다른 단점도 있으므로 가능하면 여러 개의 리액트 루트를 피해야 합니다.

• 다른 리액트 루트는 콘텍스트를 공유할 수 없습니다.리액트 루트 간에 통신할 필요가 있는 경우 글로벌 DOM 이벤트에 폴백해야 합니다.
• 시간 슬라이싱과 같은 성능 최적화(일시 중단 및 비동기 렌더링)를 통해 얻을 수 있는 이점은 줄어듭니다.루트 경계에서 일시 중단할 수 없습니다.

추가 정보

ReactDOM.render()를 같은 컨테이너에서 여러 번 사용해도 괜찮은지 궁금할 경우, 문서는 다음과 같이 말합니다. "React 요소가 이전에 [같은] 컨테이너에 렌더링된 경우 업데이트되고 최신 React 요소를 반영하기 위해 필요한 경우에만 DOM을 변환합니다."

언급URL : https://stackoverflow.com/questions/31302803/is-it-ok-to-use-react-render-multiple-times-in-the-dom