为什么react要使用JSX

最新推荐文章于 2024-02-27 14:16:16 发布

zhongshizhi91

最新推荐文章于 2024-02-27 14:16:16 发布

阅读量679

点赞数

分类专栏： React 低代码文章标签： reactjs

本文链接：https://blog.csdn.net/shuxiaoxii/article/details/115955552

版权

React 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

低代码

2 篇文章 0 订阅

订阅专栏

官方文档

什么是JSX?

1.一个 JavaScript 的语法扩展

为什么使用JSX?

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

在html文件中不使用JSX 创建dom 节点

react
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

react-dom
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<script type='text/javascript'>
  const name = 'shuxiaoxii';
  const element = React.createElement('h1', {style: {color: 'red'}}, `hello, ${name}`);
  ReactDOM.render(element, document.getElementById('root')
</script>

在html文件中使用jsx 创建dom 节点

<!-- react核心库-->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

<!-- react-dom -->
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<!-- 支持JSX -->
<script crossorigin src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>

<script type='text/babel'>
  const name = 'shuxiaoxii';
  const element = <h1 style={{color: 'red'}}>Hello {name}</h1>
  ReactDOM.render(element, document.getElementById('root'));
</script>

react 核心库创建虚拟dom
react-dom将虚拟dom渲染到真实dom中
jsx本质是一个语法糖, 简化React.createElement的书写语法

new Function(低代码)实现react组件

2021年7月19日增加使用Babel.transform 转换 jsx代码为js代码并执行

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>

</head>
<body>
<div id="root"></div>
<script  src="./js/react.production.min.js"></script>
<script src="./js/react-dom.production.min.js"></script>
<script type='text/javascript'>
    // const name = 'zsz';
    // const childrenElement = React.createElement('span', {style: {color: 'red'}}, `hello, ${name}`);
    // const element = React.createElement('h1', {style: {color: 'red'}}, childrenElement);
    // ReactDOM.render(element, document.getElementById('root'));
   /******************** 以上代码等价于 ************/
  let func = new Function('name','const childrenElement = React.createElement(\'span\', {style: {color: \'red\'}}, `hello, ${name}`);\n' +
      '    const element = React.createElement(\'h1\', {style: {color: \'red\'}}, childrenElement);\n' +
      '    ReactDOM.render(element, document.getElementById(\'root\'));');
   func('zsz');

</script>
</body>
</html>