DOM에서 React.render ()를 여러 번 사용해도 괜찮습니까?

107

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를 사용하는 좋은 방법입니까?

reactjs

— YPCrumble
소스

답변:

120

예, React.render같은 페이지에서 여러 번 호출하는 것은 완벽합니다 . 제안한 것처럼 React 라이브러리 자체는 한 번만로드되지만를 호출 할 때마다 React.render다른 요소와 독립적 인 새 구성 요소 인스턴스가 생성됩니다. (사실 이러한 상황은 페이지의 일부가 사용되어 생성 React.render되고 나머지는 생성 되지 않는 React로 전환하는 과정에있는 사이트에서 드물지 않습니다.)

— 홉 따는 사람
소스

굉장합니다. 기존 Django 앱을 "강력하게 충전"하는데도 매우 유용합니다. 렌더링 된 콘텐츠에 Django를 사용하여 SEO를 얻고 React를 사용하여 DOM 요소와 상호 작용하고 싶습니다. 이것은 달성하기 매우 간단합니다.

— YPCrumble

shouldComponentUpdate를 볼 수도 있으며 향후 성능을 높일 수 있습니다 (아마도 귀하의 경우는 아님). 여기에 참조가 있습니다 : facebook.github.io/react/docs/component-specs.html

— Jim

@YPCrumble 호퍼 대답이 맞다면 표시하십시오

— 다나 나무꾼

그리고 어떤 페이지를 여는 지에 따라 ReactDOM.render()동일한 구성 요소를 삽입해야하는 여러 개가있는 경우 는 div어떻게됩니까? 특히, 당신은 모든 페이지에서 하나의 추악한 연결 app.js자산 만 가지고 있습니다 <script src="app.js">. 그리고 그것은 libs, 예를 들어 jQuery, Bootstrap, React를로드하고 사용자 정의 JS 코드와 React 구성 요소를 가지고 있습니다. 방문하면/foo 하면 ReactDOM.render(<Foo />, getElemById('content')). /bar', you have ReactDOM.render (<Bar />, getElemById ( 'content'))` 를 방문하면 됩니다. 그들은 방해합니다. 이것을 어떻게 관리합니까?

— Green

@Green 구성 요소가 별도의 페이지에 있으면 어떻게 방해합니까? 그렇지 않으면 각 구성 요소에 대해 새 컨테이너 요소를 추가하지 마십시오.ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— hopper

이 접근 방식은 페이지로드 성능 관점에서 괜찮지 만 다른 단점이 있으며 가능하면 여러 React 루트를 피해야합니다.

다른 React 루트는 컨텍스트를 공유 할 수 없으며 React 루트간에 통신해야하는 경우 전역 DOM 이벤트에 대한 폴 백이 필요합니다.
서스펜스 및 비동기 렌더링과 같은 타임 슬라이싱 과 같은 성능 최적화의 이점이 적습니다 . React 루트 경계를 가로 질러 일시 중단 할 수 없습니다.

더 많은 raeding- https: //github.com/facebook/react/issues/12700

— 양순 테이
소스