React-JSX写法

通过createElement创建元素存在的问题，如果结构比较简单还好，但是如果结构比较复杂，就比较难以下手，所以大牛们就发明了JSX，专门用来编写React中的页面结构体的。

什么是 JSX

JSX === JavaScript + X === (XML) === (eXtension)，JSX是一个看起来很像 XML 的 JavaScript 语法扩展。

为什么要使用 JSX

使用JSX使得我们在React中编写页面结构更为简单、灵活，JSX 是类型安全的，在编译过程中就能发现错误，JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化，可以防止XSS注入攻击。

官方文档

JSX 的本质

浏览器只认识JS不认识JSX, 所以我们编写的JSX代码是无法在浏览器中执行的，为了解决这个问题, 我们需要借助babel将JSX转换成JS, 也就是转换成React.createElement()。

https://zh-hans.reactjs.org/docs/react-without-jsx.html

https://babeljs.io/repl/

在项目中将 JSX 转换成 JS

导入babel.js

在script标签上添加type="text/babel"

改造之前写的案例的代码，改成JSX写法如下所示：

<!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>Document</title>
    <script src="React/react.development.v17.js"></script>
    <script src="React/react-dom.development.v17.js"></script>
    <script src="React/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    // 1.创建虚拟DOM
    let message = 'BNTang';

    function myRender() {

        let oRoot = (
            <div>
                <div>{message}</div>
                <button onClick={myFn}>按钮</button>
            </div>
        )

        ReactDOM.render(oRoot, document.getElementById('app'), () => {
            console.log('已经将虚拟DOM转换成了真实DOM, 已经渲染到界面上了');
        });
    }

    myRender();

    function myFn() {
        message = 'www.it6666.top';
        myRender();
    }
</script>
</body>
</html>
posted @ 2020-11-03 23:08  BNTang  阅读(394)  评论(0)  编辑  收藏  举报