react基础组件的使用

最新推荐文章于 2022-07-01 09:42:54 发布

fire_zero

最新推荐文章于 2022-07-01 09:42:54 发布

阅读量765

点赞数

分类专栏：框架前端文章标签： react

本文链接：https://blog.csdn.net/fire_zero/article/details/105912994

版权

本文详细介绍了React的基础知识，包括jsx的基本使用，如jsx的意义、语法规则和注意事项；组件的创建，包括函数式组件和es6类组件的定义；组件的属性，如构造器、props和refs的使用；以及组件的组合和一些重点知识，如call、apply、bind的区别和三点运算符的应用。此外，还讲解了ES6类的特性以及React中类组件的继承概念。

摘要由CSDN通过智能技术生成

react基础

一、jsx基本使用

1、简单的react案例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello React</title>

</head>

<body>
  <div id='demo'> </div>

  <!-- react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 虚拟dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 翻译：es6=>es5  , jsx=>js -->
  <script src="../js/babel.min.js"></script>

  <!-- 要把type="text/JavaScript"改为type="text/babel" -->
  <script type="text/babel">
    // 创建虚拟dom
  const VDOM = <h1>hello react</h1>  //此处VDOM不是字符串，不用加引号，jsx语法中可以写标签
  //通过react渲染虚拟dom
  // ReactDOM.render('渲染对象','渲染到哪')
  ReactDOM.render(VDOM,document.getElementById('demo'))
  
  /*
      虚拟DOM：
      1、虚拟DOM是一个普通的object对象


      2、虚拟DOM和真实DOM的区别
      const VDOM = <h1>hello react</h1>
      const DOM = document.getElementById('demo');
      console.log(VDOM);
      console.log(trueDOM);
      在debug模式下可发现：VDOM对象中包含的内容比trueDOM少的多

      (1).虚拟DOM比较“轻”，真实DOM比较“重”
      (2).虚拟DOM是react在用的，无需真实DOM身上那么多的属性。
   */  
  </script>
</body>

</html>

2、原生创建虚拟DOM

<!-- 使用原生js创建虚拟DOM -->
<script type="text/javascript">
const myId = 'AtGuigU'
const myContent = 'HeLlO,ReAct'

//1.创建虚拟DOM
//React.createElement(标签名,标签属性,内容)
const VDOM = React.createElement('h1',{id:myId.toLowerCase()},React.createElement('span',{},myContent.toLowerCase()))

//2.渲染虚拟DOM
ReactDOM.render(VDOM,document.getElementById('test'))
</script>

3、jsx创建虚拟DOM

<script type="text/babel" >

const myId = 'AtGuigU'
const myContent = 'HeLlO,ReAct'

//1.创建虚拟DOM
//React.createElement(标签名,标签属性,内容)
const VDOM = (
              <div>
                <h1 id={myId.toLowerCase()} zhangsan="qunideba">
                  <span className="title" style={
  {fontSize:'50px'}}>
                    {myContent.toLowerCase()}
                  <