Understand the relationships between React, React – DOM, and JSX

The React package is the core package for building and updating the virtual DOM. React-dom is responsible for rendering a tree of virtual DOM nodes to HTML DOM nodes. JSX is the syntactic sugar provided by React that converts DSL(domain-specific language) into javascript.

Analyze the role of JSX

Here is the code for the same effect, to distinguish JSX’s role

1. JSX code

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

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

Non-jsx code

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

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

The purpose of JSX is to convert the use of React. CreateElement into a more writable JSX format.

import React from ‘react’

When writing JSX code, the first question is to import React from ‘React’, why? Because JSX code, when converted to standard javascript code, becomes react.createElement (…) , so we need to introduce.

Combine different versions of React code

React and react-dom are compatible versions

Scenario: In the Act15 project, the component Editor of Act17 is introduced.

Solution:

  • The React17 component is compatible with React17react-domComponent rendering
  • The React15 component is compatible with React15react-domComponent rendering
  • React15 providerefNodes are handed over to the introduced React componentrender mountoperation
// React17 Editor component
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';

const Editor = () = >{... };export default const renderEditor = (container) = > {
	return {
		/ / rendering
		render(props){
			render(<Editor {. props} / >, container);
		}
		/ / unloading
		unmount(){ unmountComponentAtNode(container); }}}Copy the code
// React15 main project
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" />; }}Copy the code

reference

  • How do I combine two different versions of React