Есть ли проблема иметь много ReactDOM.render() в проекте ReactJS?
Мы работаем над проектом Laravel, и он полностью написан с использованием JavaScript/HTML/JQuery. Мы рассматриваем возможность перехода на React, поскольку Laravel поддерживает его. Можно ли иметь много ReactDOM.render() (для каждого компонента) на начальных этапах, чтобы мы могли постепенно и полностью преобразовать нашу кодовую базу в долгосрочной перспективе?
Нужен ли доступ к ref или мы можем просто визуализировать каждый компонент следующим образом:
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick = {() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
ReactDOM.render(<App/>, document.querySelector("#form"))
и используйте его так для каждого компонента:
// some html code and then
...
<div id = "form"> </div>
<div id = "modal"> </div>
<div id = "navbar"> </div>
...
// rest of html code
Ответы 2
Да, это совершенно нормально. React предназначен для постепенного внедрения.
Да, это совершенно нормально, когда вы вызываете ReactDOM.render несколько раз, это в основном просто вызывает сравнение, очень похожее на метод render компонента класса.
На самом деле я написал статью (с учебным пособием) о «Интеграция React с другими приложениями и фреймворками», в которой говорится именно об этой теме.
Суть этого подхода в том, что вы можете выставить глобальный объект с функциями mount и unmount вашего виджета/мини-приложения и внутри него вызвать ReactDOM.render или ReactDOM.unmountComponentAtNode.
window.MyComponent = {
mount: (props, container) => {
ReactDOM.render(<Component {...props} />, container);
},
unmount: (container) => {
ReactDOM.unmountComponentAtNode(container);
}
}
Затем в другой части страницы вы можете вызывать эти функции, независимо от того, какую библиотеку или фреймворк вы используете.
Прелесть здесь в том, что другие react приложения могут использовать его, как если бы это был настоящий компонент:
class MyComponentWrapper extends PureComponent {
// create a ref so we can pass the element to mount and unmount
myRef = React.createRef();
componentDidMount() {
// initial render with props
window.MyComponent.mount(this.props, this.myRef.current);
}
componentDidUpdate(prevProps) {
if (prevProps !== this.props){
window.MyComponent.mount(this.props, this.myRef.current);
}
}
componentWillUnmount(){
window.MyComponent.unmount(this.myRef.current);
}
render() {
return <div ref = {this.myRef}></div>
}
}
Надеюсь, поможет.
@RaminJafary хорошо, это соответствует вашим потребностям?
То, как вы объяснили, просто фантастика. Проект огромен, и подключение React к проекту, я предполагаю, что у нас может не быть преимущества наличия одного корневого элемента, а затем рендеринга другого компонента в том же корневом дереве DOM (как я понял из вашей статьи, я думаю!). Так и есть. хорошо иметь много отдельных контейнеров для каждого компонента, пока проект не будет полностью преобразован в SPA. Есть ли снижение производительности для такого рабочего процесса?
Это именно моя точка зрения. Вы можете обернуть каждый раздел в свое собственное приложение (корень)
Спасибо, я только что уточнил свой комментарий, поэтому я кристально ясно выражаюсь