传说，html有DOM，（Document Object Model），是一个树状结构，便于浏览器绘制界面。但是DOM刷新很慢，所以react使用虚拟DOM和面向组件方法能够找到被改变的部分，并且只重新绘制被改变的部分而不刷新整个DOM。
第一个hello world代码
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport”
content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Hello World</title>
<script src=“https://unpkg.com/react@18.2.0/umd/react.development.js”></script>
<script src=“https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js”></script>
<script src=“https://unpkg.com/babel-standalone@6.26.0/babel.min.js”></script>
</head>
<body>
<div id=“root”> </div>
<script type=“text/babel”>
// 这里相当于是自定义组件
class HelloComponent extends React.Component {
render () {
return React.createElement(‘h1‘, null, ‘Hello World‘);
}
}
// 这里是在调用render函数进行渲染
ReactDOM.render (
React.createElement(HelloComponent, null),
document.getElementById(‘root‘)
);
</script>
</body>
</html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport”
content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Hello World</title>
<script src=“https://unpkg.com/react@18.2.0/umd/react.development.js”></script>
<script src=“https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js”></script>
<script src=“https://unpkg.com/babel-standalone@6.26.0/babel.min.js”></script>
</head>
<body>
<div id=“root”> </div>
<script type=“text/babel”>
// 这里相当于是自定义组件
class HelloComponent extends React.Component {
render () {
return React.createElement(‘h1‘, null, ‘Hello World‘);
}
}
// 这里是在调用render函数进行渲染
ReactDOM.render (
React.createElement(HelloComponent, null),
document.getElementById(‘root‘)
);
</script>
</body>
</html>
然后React.createElement(‘h1’, null, ‘Hello World’)这一句应该是等价于<h1>Hello World</h1>；然后这一句React.createElement(HelloComponent, null)也可以被改写成这样：<HelloComponent />
改后的代码：
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport”
content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Hello World</title>
<script src=“https://unpkg.com/react@18.2.0/umd/react.development.js”></script>
<script src=“https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js”></script>
<script src=“https://unpkg.com/babel-standalone@6.26.0/babel.min.js”></script>
</head>
<body>
<div id=“root”> </div>
<script type=“text/babel”>
// 这里相当于是自定义组件
class HelloComponent extends React.Component {
render () {
return <h1>Hello World</h1>;
}
}
// 这里是在调用render函数进行渲染
ReactDOM.render (
<HelloComponent />,
document.getElementById(‘root‘)
);
</script>
</body>
</html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport”
content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Hello World</title>
<script src=“https://unpkg.com/react@18.2.0/umd/react.development.js”></script>
<script src=“https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js”></script>
<script src=“https://unpkg.com/babel-standalone@6.26.0/babel.min.js”></script>
</head>
<body>
<div id=“root”> </div>
<script type=“text/babel”>
// 这里相当于是自定义组件
class HelloComponent extends React.Component {
render () {
return <h1>Hello World</h1>;
}
}
// 这里是在调用render函数进行渲染
ReactDOM.render (
<HelloComponent />,
document.getElementById(‘root‘)
);
</script>
</body>
</html>
这是因为react.js代码和JSX是互通的，都可以相互转换。
据说啊，JSX转义器会在小小的里面挖呀挖呀挖，遇到了<之后就会开始转义。如果<后面是小写，那么将其转译成html代码，如果是大写，则转译成自定义组件（这意味着react的自定义组件名称一定要是大写的）。
例如刚才的<HelloComponent />就是会被转译成React.createElement(HelloComponent, null)真是太神奇了……
Please follow and like us:
