DEV Community

Yongkang Cheng
Yongkang Cheng

Posted on

React DOM简单介绍 & Hello World

传说,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>
Enter fullscreen mode Exit fullscreen mode

然后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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)