如何组合不同版本的React组件到同一项目中

我是leon

修改于 2022-05-11 10:00:04

2.5K0

修改于 2022-05-11 10:00:04

文章被收录于专栏：leon的专栏

理解 react、react-dom 和 jsx 之间的关系

react包是React的核心包，负责构建、更新虚拟 dom。

react-dom负责将虚拟 dom 组成的树，渲染到 HTML 的 dom 节点上。

jsx是React提供的语法糖，负责将 DSL(特定领域语言)，转换成 javascript。

分析 jsx 的作用

以下是同样效果的代码，用于分辨 jsx 的作用

1、jsx 代码

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(<Hello toWhat="World" />, document.getElementById("root"));

2、非 jsx 代码

class Hello extends React.Component {
  render() {
    return React.createElement("div", null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, { toWhat: "World" }, null),
  document.getElementById("root")
);

可以得出：jsx 的作用，是将React.createElement的使用方式，转换成更加易书写的jsx格式。

import React from ‘react’

写 jsx 代码的时候，第一句问题要import React from 'react'，为什么？

因为 jsx 代码转换成标准的 javascript 代码后，会变成React.createElement(...)，所以需要引入。

组合不同版本的 React 代码

react和react-dom是需要同版本配套使用的

场景：React15 项目中，引入 React17 的组件 Editor。

解决方案：

React17 组件，采用 React17 配套的react-dom进行组件渲染
React15 组件，采用 React15 配套的react-dom进行组件渲染
React15 提供ref节点，交由被引入的高版本 React 组件，进行render mount操作

// React17 Editor组件
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';

const Editor = () => {...};

export default const renderEditor = (container) => {
	return {
		// 渲染
		render(props){
			render(<Editor {...props} />, container);
		}
		// 卸载
		unmount(){
			unmountComponentAtNode(container);
		}
	}
}

// React15 主项目
import React from 'react';
import { render } from 'react-dom';
import App from 'app.jsx';

render(App, document.getElementById('app'));


// app.jsx
import renderEditor from 'editor';

class App extends React.Component{
	componentDidMount(){
		if(this.refs.editor){
			const { render, unmount } = renderEditor(this.refs.editor);
			this.unmount = unmount;
			render({...});
		}
	}
	componentWillUnmount(){
		this.unmount();
	}
	render(){
		return <div ref="editor" />;
	}

}