传说,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>
然后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>
这是因为react.js代码和JSX是互通的,都可以相互转换。
据说啊,JSX转义器会在小小的里面挖呀挖呀挖,遇到了<
之后就会开始转义。如果<
后面是小写,那么将其转译成html代码,如果是大写,则转译成自定义组件(这意味着react的自定义组件名称一定要是大写的)。
例如刚才的<HelloComponent />
就是会被转译成React.createElement(HelloComponent, null)
真是太神奇了……
Top comments (0)