2-jsx核心语法一

最新推荐文章于 2024-04-24 11:39:08 发布
最新推荐文章于 2024-04-24 11:39:08 发布
阅读量70 收藏
点赞数
分类专栏： react官网学习 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnyboysix/article/details/127274181
版权

一 es5  es6类定义 以及类的继承

 

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 22:05:18
 * @LastEditTime: 2022-10-11 22:09:16
-->
<!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>Document</title>
</head>
<body>

  <script>
    //es5中如何定义类
    function Person(name, age) {
      this.name = name
      this.age = age
    }

    Person.prototype.running = function() {
      console.log(this.name, this.age, "running")
    }

    let p = new Person('why', 18)
    console.log(p.name, p.age)

    p.running()
  </script>
</body>
</html>

 

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 22:09:44
 * @LastEditTime: 2022-10-11 22:18:18
-->
<!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>Document</title>
</head>
<body>

  <script>
    //es6通过class创建
    class Person {
      //构造方法
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      //定义方法
      running() {
        console.log(this)
        console.log(this.name, this.age, "running")
      }
    }

    const p = new Person("why", 18)
    console.log(p.name, p.age)
    p.running()

    //this绑定题目
    let func = p.running
    //func() //undefined

    let obj = {
      name: 'kobe',
      age: 30
    }
    func.call(obj) //使用call是对象   apply是数组

    //重新给func赋值
    func = func.bind(obj)
    func()
  </script>
</body>
</html>

 

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 22:19:11
 * @LastEditTime: 2022-10-11 22:30:26
-->
<!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>Document</title>
</head>
<body>
  
  <!--
    面向对象有三大特征  封装  继承   多态
    继承：1 减少重复的代码  2 多态的前提（鸭子类型）
  -->
  <script>

    class Person {
       constructor(name, age) {
        this.name = name
        this.age = age
       }

       running() {
        console.log("running方法")
       }
    }

    class Student extends Person {
      constructor(name, age, sno) {
        super(name, age)
        this.sno = sno
      }
    }

    const stu = new Student("why", 18, 110)
    console.log(stu.name, stu.age, stu.sno)
    stu.running()

    class Teacher extends Person{
      constructor(name, age, title) {
        //子类必须要初始化父类对象
        super(name, age)
        this.title = title
      }
    }

    const teach = new Teacher("why teacher", 22, '数学')
    console.log(teach.name, teach.age, teach.title)
    teach.running()
  </script>
</body>
</html>

二 案例练习_列表循环

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 22:33:05
 * @LastEditTime: 2022-10-11 22:53:46
-->
<!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>Document</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <!--编写react代码-->
  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super()

        this.state = {
          message: 'Hello World',
          title: '电影列表',
          movies: [
            "大话西游", "盗梦空间", "星际穿越", "流浪地球"
          ]
        }
      }
      render() {
        const liArray = []  //方法一循环的方式
        for(let movie of this.state.movies) {
          liArray.push(<li>{ movie }</li>)
        }
        return (
          <div>
            <h2>{ this.state.title }</h2>
            <ul>
              { liArray }
            </ul>

            <ul>
              {
                this.state.movies.map((item) => {
                  return <li>{ item }</li>
                })
              }
            </ul>
          </div>
        )
      }
    }
    ReactDOM.render(<App/>, document.getElementById("app"))
  </script>

</body>
</html>

 三 计数器案例

<!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>Document</title>
</head>
<body>
  
  <div id="app"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <script type="text/babel">
  class App extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        counter: 0
      }
    }

    render() {
      return (
        <div>
          <h2>当前计数: { this.state.counter }</h2>
          <button onClick={this.increment.bind(this)}>+1</button>
          <button onClick={this.decrement.bind(this)}>-1</button>
        </div>
      )
    }

    increment() {
      this.setState({
        counter: this.state.counter + 1
      })
    }

    decrement() {
      this.setState({
        counter: this.state.counter - 1
      })
    }
  }

  ReactDOM.render(<App/>, document.getElementById('app'))
  </script>
</body>
</html>

 四 认识jsx

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 23:12:46
 * @LastEditTime: 2022-10-11 23:13:36
-->
<!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>Document</title>
</head>
<body>
  
  <div id="app"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <script type="text/babel">
  
  //jsx语法
  const element = <h2>hello world</h2>

  ReactDOM.render(element, document.getElementById('app'))
  </script>
</body>
</html>

 五 jsx中如何写注释

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 23:22:54
 * @LastEditTime: 2022-10-11 23:52:28
-->
<!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>Document</title>
</head>
<body>
  
  <div id="app"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <script type="text/babel">
  class App extends React.Component {
    constructor() {
      super()
    }
    render() {
      return (
        <div>
          {/*我是一段注释*/}
          <h2>Hello world</h2>
        </div>
      )
    }
  }
  ReactDOM.render(<App/>, document.getElementById('app'))
  </script>
</body>
</html>

 六 jsx嵌入数据

 

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 23:25:42
 * @LastEditTime: 2022-10-11 23:53:18
-->
<!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>Document</title>
</head>
<body>
  
  <div id="app"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <script type="text/babel">
  class App extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        //1 {}中可以正常显示的内容
        name: 'why', //String
        age: 18,  //Number
        names: ['abc', 'cba', 'bba'], //Array
        //2 {}中不能显示（忽略）
        test1: null, // null
        test2: undefined, //undefined
        test3: true, //Boolean
        flag: true,
        //3. 对象不能作为jsx的子类
        friend: {
          name: 'kobe',
          age: 12,
        }
      }
    }
    render() {
      return (
        <div>
          <h2>{ this.state.name }</h2>
          <h2>{ this.state.age }</h2>
          <h2>{ this.state.names }</h2>
          <h2>{ this.state.test1 }</h2>
          {/*如果想显示+ '' 或者用tostring*/}
          <h2>{ this.state.test1 + '' }</h2>
          <h2>{ this.state.test2 }</h2>
          <h2>{ this.state.test3 }</h2>
          <h2>{ this.state.test3.toString() }</h2>

          <h2>{ this.state.flag ? '你好啊' : null }</h2>
        </div>
      )
    }
  }
  ReactDOM.render(<App/>, document.getElementById('app'))
  </script>
</body>
</html>

七 jsx嵌入表达式

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-11 23:38:34
 * @LastEditTime: 2022-10-11 23:42:58
-->
<!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>Document</title>
</head>
<body>

  <div id="app"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <script type="text/babel">
  class App extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        firstName: 'Kobe',
        lastName: 'bryant',
        isLogin: true
      }
    }

    render() {
      const { firstName, lastName, isLogin } = this.state
      return (
        <div>
          {/*1 运算符表达式*/}
          <h2>{ firstName + lastName }</h2>
          <h2>{ 50 * 20 }</h2>

          {/*2 三元表达式*/}
          <h2>{ isLogin ? '欢迎回来' : '请先登陆' }</h2>

          {/*3 进行函数调用*/}
          <h2>{ this.getFullName() }</h2>
        </div>
      )
    }

    getFullName() {
      return this.state.firstName + " " + this.state.lastName
    }
  }

  ReactDOM.render(<App/>, document.getElementById('app'))
  </script>
</body>
</html>

 

sunnyboysix
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSX语法及特点介绍_v4
04-25
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX简介 JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当...
React(3)-类组件的继承/定义及数据更新
m0_65912225的博客
08-21 1504
类组件
react 类的继承
qq_43137725的博客
12-09 2618
父类Person有一些公共属性及方法，不需要每次声明构造函数重复写，所以便出现了继承的概念。 class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello = function () { console.log('Hel...
React项目组件继承实战
anderlaw的博客
12-10 4718
囿于reat使用组合而不是继承的提示，大家似乎都不怎么使用继承，然而在一些方面继承还是能发挥不少作用。 为什么使用继承 当我们有多个页面需要执行页面初始化操作，可能是动态计算视口的宽高度、计算屏幕的分辨率，甚至为一些节点添加初始化的事件（注意页面卸载时注销），或者一些其他的http请求、验证等初始化行为。这些行为有一个特点：需要重复执行或某一时间后重复执行。继承实现了代码的共享与复用。 执行顺...
No.011 组合 vs 继承
十亿萝莉的夢
04-23 213
组合 vs 继承 React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。 在这篇文档中，我们将考虑初学 React 的开发人员使用继承时经常会遇到的一些问题，并展示如何通过组合思想来解决这些问题。 包含关系 有些组件无法提前知晓它们子组件的具体内容。在Sidebar（侧边栏）和Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。 我...
react.js 类继承组件与函数式组件的区别
GoodIdea
03-01 3751
区别一： 类继承的方式，相较于函数式组件，有更多的特性。 内部状态： state 生命周期函数 场景一：如果一开始我就知道这个组件需要用到state 或者生命周期函数组件时，就要毫不犹豫的使用类继承的方式。 场景二：如果一开始用不到这些特性的时候，我会先用函数式组件，如果随着业务的演进，组件需要应用到这些特性的时候，我会再把它重构成类继承的方式。start : 这个重构什么简...
Sublime-JS-Custom:Sublime Text 的可自定义 JavaScript 语法高亮显示
07-24
支持 JSX、Flow 等的 Sublime Text 的可定制 JavaScript 语法高亮显示。 您可以使用 JS Custom 作为替代品，或者使用您需要的功能创建自己的自定义语法。 由于 JS Custom 基于核心 JavaScript 语法，因此它可以与为...
landau:具有JSX语法和类似React的组件系统的OpenJSCAD
04-29
Landau旨在成为更大的CAD应用程序生态系统中的核心但可扩展的构建基块。 可与Landau一起使用的更多有用的项目： ：用于渲染和检索有关Landau模型的信息的服务器。 是构建与Landau相关的GUI和非JS应用程序的良好基础...
曲柄：用功能，承诺和生成器编写JSX驱动的组件
02-05
产品特点陈述式Crank使用与React相同的JSX语法和差异算法，使您可以直接在JavaScript中编写类似HTML的代码。公正的职能Crank中的所有组件仅仅是功能或生成器功能。 不需要类，钩子，代理或模板语言。承诺友好Crank为...
详解如何用babel转换es6的class语法
12-12
它可以把es6+的语法转换为es5，也可以转换JSX等语法。 我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码，例如env、stage-0等。 实际上babel可以通过自定义插件的方式实现任何代码的转换，接下来...
React组件继承的由来
weixin_34007291的博客
07-04 1471
没有显式继承的时候我们这么写: import * as React from "react"; export interface HelloProps { compiler: string; framework: string; } export const Hello = (props: HelloProps) => <h1>Hello from {props...
【react学习笔记】jsx语法规则、创建函数式组件及类式组件、组件实例的三大核心属性
Kamen_Yip的博客
11-16 1124
创建虚拟DOM： const VDOM = React.createElement('div', {id:'title'}, '标签内容') // 等价于 const VDOM = <div id="title">标签内容</div> // 这里不要加引号，不是字符串 jsx语法规则： 定义虚拟DOM时，不要写引号。 标签中混入JS表达式时要用{}。 央视得类名指定不要用class，要用className。 内联样式，要用style={{key:value}}得形式去写（其中最外
react集成 VS 继承
沈斯明技术博客
09-14 1078
集成 VS 继承 React有强大的集成模快，并且在项目中推荐使用集成而不是继承 容器集成 在项目中有时候在渲染前父组件不知道他的子组件是什么，在这种情况下建议用props的children属性把子元素传递到父组件中 // 父组件 function FancyBorder(props) { return ( div className={'FancyBorder
搞懂toString() 和 valueOf()
Sapling
03-05 2448
一.toString() toString()方法返回的是对象的字符串 每个对象都有一个 toString() 方法，当对象被表示为文本值时或者当以期望字符串的方式引用对象时，该方法被自动调用。对对象x，toString() 返回 “[object type]”,其中type是对象类型。如果x不是对象，toString() 返回x应有的文本值。 var obj = {}; var a = obj....
JSX中参数输出HTML
Joyce的前端日常
09-07 3471
jsx传递参数时，如何将参数识别为html而非字符串。
在React函数组件中使用错误边界和errorElement进行错误处理
最新发布
笔记、经验、日常分享
04-24 414
ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。如果需要为嵌套的组件树提供错误边界,你仍然需要使用。组件树中发生错误,React 会自动卸载组件树,并替换为传递给。是一种更通用的错误处理方式,可用于任何组件及其子组件树。在 React 18 中,你可以在根组件上使用。
react之渲染与props
weixin_73918953的博客
04-23 987
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。你可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时，你可以设置 state。
如何在React中构建动态下拉组件 - 解释React复合组件模式
晓风晓浪
04-23 524
下拉菜单长期以来一直是网站和应用程序中的重要组成部分。它们是用户交互的默默英雄，通过简单的点击或轻触默默地促进着无数的操作和决策。今天你可能已经遇到了其中之一，无论是在你最喜爱的在线商店上选择类别，还是在注册表单上选择你的出生日期。但如果我告诉你，有一个秘密配方可以将你的下拉菜单从平凡提升到华丽呢？加入我，我将解剖复合组件模式的奥秘，并利用其能力构建一个动态下拉组件。（本文视频讲解：java567.com）
react之响应事件
weixin_73918953的博客
04-24 1069
你可以通过将函数作为 prop 传递给元素如来处理事件。必须传递事件处理函数，而非函数调用！，不是。你可以单独或者内联定义事件处理函数。事件处理函数在组件内部定义，所以它们可以访问 props。你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子组件。你可以根据特定于应用程序的名称定义事件处理函数的 prop。事件会向上传播。通过事件的第一个参数调用来防止这种情况。事件可能具有不需要的浏览器默认行为。调用来阻止这种情况。
什么是JSX语法？什么是React组件
08-24
JSX是JavaScript语法扩展，用于在React中编写UI组件。它允许我们在 JavaScript 代码中编写类似HTML的结构，将组件的结构和逻辑紧密地组合在一起。 React组件是构建用户界面的独立、可重用的代码片段。它们将界面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值