Sử dụng React.render () nhiều lần trong DOM có được không?


107

Tôi muốn sử dụng React để thêm các thành phần nhiều lần trong suốt DOM. Fiddle này hiển thị những gì tôi đang tìm cách làm và nó không có bất kỳ lỗi nào. Đây là mã:

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'));

Tôi đã thấy câu hỏi này và tôi sợ rằng bằng cách làm ở trên, tôi sẽ gặp rủi ro để các thành phần React can thiệp vào nhau. Câu trả lời cho câu hỏi đó đề xuất sử dụng kết xuất phía máy chủ, đây không phải là một tùy chọn đối với tôi vì tôi đang sử dụng phía máy chủ Django.

Mặt khác, có lẽ những gì tôi đang làm là ổn vì tôi chỉ có một phiên bản của thư viện React được gắn kết (trái ngược với nhiều thành phần gọi phiên bản React của riêng chúng)?

Cách sử dụng nhiều phiên bản DOM này có phải là cách sử dụng React phù hợp không?

Câu trả lời:


120

Có, hoàn toàn ổn nếu gọi React.rendernhiều lần trên cùng một trang. Như bạn đã đề xuất, bản thân thư viện React chỉ được tải một lần, nhưng mỗi lệnh gọi tới React.rendersẽ tạo ra một cá thể thành phần mới độc lập với bất kỳ phiên bản nào khác. (Trên thực tế, tình huống như vậy không phải là hiếm trên các trang web đang trong quá trình chuyển đổi sang React, nơi một số phần của trang được tạo bằng cách sử dụng React.rendervà những phần khác thì không.)


9
tuyệt vời - nó cũng cực kỳ hữu ích trong việc "tăng tốc" ứng dụng Django hiện có. Tôi muốn sử dụng Django cho nội dung được hiển thị để đạt được SEO và sử dụng React để tương tác người dùng với các phần tử DOM. Điều này làm cho nó cực kỳ đơn giản để đạt được.
YPCrumble

bạn có thể cũng có thể xem nênComponentUpdate và nó có thể khởi động hiệu suất trong tương lai (có thể không phải trong trường hợp của bạn). Đây là tài liệu tham khảo: facebook.github.io/react/docs/component-specs.html
Jim vào

@YPCrumble nếu rầy câu trả lời là đúng, hãy đánh dấu nó
Dana Woodman

Và trong trường hợp có nhiều ReactDOM.render()phải chèn các thành phần trong cùng một divtùy thuộc vào trang bạn mở thì sao? Đặc biệt, bạn chỉ có một app.jsnội dung nối không hợp nhất mà bạn có <script src="app.js">trong mỗi trang. Và điều đó tải libs, chẳng hạn, jQuery, Bootstrap, React và có mã JS tùy chỉnh và các Thành phần React của bạn. Nếu bạn đến thăm /foo, bạn có ReactDOM.render(<Foo />, getElemById('content')). Nếu bạn truy cập /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) '. Họ can thiệp. Làm thế nào bạn quản lý điều này?
Màu xanh lá cây

3
@Green Tôi không chắc mình hiểu, nếu các thành phần nằm trên các trang riêng biệt thì chúng sẽ can thiệp như thế nào? Nếu không, tại sao không thêm một phần tử vùng chứa mới cho từng thành phần, tức là:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))
hopper

3

Cách tiếp cận này là tốt từ quan điểm hiệu suất tải trang, nhưng có những nhược điểm khác và nên tránh sử dụng nhiều gốc React nếu có thể.

  • Các gốc React khác nhau không thể chia sẻ ngữ cảnh và nếu bạn cần giao tiếp giữa các gốc React, bạn sẽ cần dự phòng các sự kiện DOM toàn cầu
  • Bạn nhận được ít lợi ích hơn từ các tối ưu hóa hiệu suất như cắt thời gian - kết xuất hồi hộp và không đồng bộ. Không thể tạm ngưng giữa các ranh giới gốc của React

Raeding nhiều hơn - https://github.com/facebook/react/issues/12700

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.