JSX

是React创的js的语法扩展可以在js中编写像HTML一样的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/babel">
        const element = <h1>Hello, world!</h1>; 
        console.log(element)
    </script>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>

</html>

比如我想创建一个h1的DOM元素，在jsx下，就可以直接这么写

const element = <h1>Hello, world!</h1>;

我们打印下element

它本质上就是一个 React 虚拟DOM

那它怎么被创建出来的呢？其实是通过了就是babel语法糖的转义，也即通过下面的方法，创建了一个虚拟DOM

React.createElement('h1', {id: 'recipe', 'data-type': 'title'}, 'Hello World');

在最新的react API中，已经不再使用createElement这个方法了。我们可以直接更快的创建出一个虚拟DOM元素。

如果是换作原生js这么写，直接就报错了

<script>
    const element = <h1>Hello, world!</h1>
    console.log(element)
</script>

原生js下只能定义成字符串的格式，但它仅仅就只是个字符串了

const element = `<h1>Hello, world!</h1>`

渲染

我们创建完了一个虚拟DOM，就可以拿它去渲染了。需要用到

ReactDOM中的render()方法

render()方法，接受三个参数：

1.React元素节点。 2.实际的DOM元素（挂载点） 3.回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const element = <h1>Hello, world!</h1>; 
        console.log(element)

        ReactDOM.render(
          element,
          document.getElementById('app')
      );
    </script>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>

</html>

用JSX创建虚拟DOM并渲染

JSX

渲染

ReactDOM中的render()方法

猜你喜欢