reactNote

最新推荐文章于 2024-07-23 13:00:00 发布

可乐焖大虾

最新推荐文章于 2024-07-23 13:00:00 发布

阅读量89

点赞数

文章标签：经验分享

本文链接：https://blog.csdn.net/weixin_48473782/article/details/128548527

版权

react笔记

React 是一个用于构建用户界面的 JavaScript 库。可以在React首页或React教程中学习 React。

JSX

JSX相关介绍

全称: JavaScript XML
JSX是react定义的一种类似于XML的JS扩展语法: 它本质是 React.createElement(component, props, ...children)的语法糖。
作用: 用来简化创建虚拟DOM
JSX语法规则:

仅有一个根标签

标签要闭合

定义虚拟DOM时，不要加引号，因为不是字符串

标签中混入JS表达式要用{ }

样式的类名制定不要用class, 要使用className

内联样式用style={{key:value}}

若标签以小写字母开头，则将该标签转为html中的同名元素，若html中无该标签对应的同名元素，则报错

若标签以大写字母开头，react就去渲染对应的自定义组件，若组件没有定义，则报错

JSX使用

通过JSX可以创建虚拟DOM(本质上就是一个对象), 虚拟DOM通过 ReactDOM.render(virtualDOM, containerDOM) 渲染到页面上去。

virtualDOM: 纯js或jsx创建的虚拟dom对象
用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

例如:

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>展示列表</title>
</head>

<body>
  <div id="test"></div>
  <!-- 我这里下载了react开发需要用到的库，也可以去官网使用CDN引入react所以来的库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <!-- 在下面编写react代码 -->
  <script type="text/babel">
    const data = ['angular', 'react', 'vue'] // items
    const VDOM = (
      <div>
        <h1>前端框架</h1>
        <ul>
          {
            data.map(item => {
              return <li>{item}</li>
            })
          }
        </ul>
      </div>
    )
    // 渲染
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>

</html>

运行效果如下图所示：