理解 react、react-dom 和 jsx 之间的关系
react
包是React
的核心包,负责构建、更新虚拟 dom。
react-dom
负责将虚拟 dom 组成的树,渲染到 HTML 的 dom 节点上。
jsx
是React
提供的语法糖,负责将 DSL(特定领域语言),转换成 javascript。
分析 jsx 的作用
以下是同样效果的代码,用于分辨 jsx 的作用
1、jsx 代码
1 2 3 4 5 6 7
| class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div>; } }
ReactDOM.render(<Hello toWhat="World" />, document.getElementById("root"));
|
2、非 jsx 代码
1 2 3 4 5 6 7 8 9 10
| 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
操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| 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); } } }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| import React from 'react'; import { render } from 'react-dom'; import App from 'app.jsx';
render(App, document.getElementById('app'));
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" />; }
}
|
参考