ReactP2_两个简单案例（列表展示和计数器）_JSX核心语法

最新推荐文章于 2023-05-13 14:08:47 发布

dauntless1310

最新推荐文章于 2023-05-13 14:08:47 发布

阅读量271

点赞数

分类专栏： react学习文章标签： reactjs

本文链接：https://blog.csdn.net/dauntless1310/article/details/108385039

版权

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ReactP2_两个简单案例（列表展示和计数器）_JSX核心语法

两个简单案例
- 列表展示
- 计数器
JSX核心语法

这边是react学习笔记，期间加入了大量自己的理解，用于加强印象，若有错误之处还请多多指出

开始有一个ES6的class讲解，个人学过好些后端OOP语言，这一块听的比较随意，也不做笔记

两个简单案例

列表展示

假设现在一个App类的构造器提供了以下数据结构，现在要求在网页中使用ul>li将movies数组中的每一条信息展示出来

constructor() {
        super();
        this.state = {
          movies: ["大话西游", "盗梦空间", "星际穿越", "流浪地球"]
        }
      }

在这边提供两种展示方法：

第一种：

render() {
        const liArray = [];//创建空数组
        for (let movie of this.state.movies) {
          liArray.push(<li>{movie}</li>);//遍历压入数组
        }

        return (
          <div>
            {/*第一种展示方式*/}
            <h2>电影列表</h2>
              <ul>
                {liArray}//展示整个数组内容
              </ul>
          </div>
        )
      }

该种方法通过创建空数组将所有的信息一次遍历后利用push方法压入数组中，再一次性展示出来

创建空数组将所有的信息一次遍历后利用push方法压入数组中，再一次性展示出来

第二种

render() {
        return (
          <div>
            {/*第二种展示方式*/}
            <h2>电影列表</h2>
            <ul>
              {
                this.state.movies.map((item) => {
                  return <li>{item}</li>
                })
              }
            </ul>
          </div>
        )
      }

该种方法通过使用函数map，对数组中的每一项进遍历，其中的每一项内容标记为item，随后以li包裹的方式返回，得到一个被li包裹的完整框架以达成展示的目的
最终效果

针对第二个方法中出现的map函数进行一个简单的介绍，首先map函数本身具备两个参数
[array].map ( 参数1，参数2)
- 参数1	—————	回调函数，会根据调用对象里面的元素数量来确定回调函数的执行次数
- 参数2	—————	使用的比较少，主要是给前面的回调函数绑定this
如果给第一个参数一个箭头函数，如下
在函数中具有三个参数，
- 参数1: item	————	执行时的对应元素
- 参数2: index	————	执行元素对应的下标值
- 参数3: arr	————	完整的数组对象
执行完成后，每个经过操作执行的元素会被存放入一个新定义的数组newArray中

const newArray = array.map((item,index,arr)=>{
	return item//此处可以对item进行操作
})

计数器

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>
            <img src="" alt=""/>
          </div>
        )
      }

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

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

再次强调一下，方法中如果里面需要调用到this来指向组件中的state的数据并对其进行操作的话，必须在方法的后面添加绑定指针bind(this)来提供指向组件的指针。

onClick={this.decrement.bind(this)}

因为侦听单击事件的回调函数是被react调用到内部去进行执行的，在调用的环境中，回调函数中的this是undefined，所以无法找到组件中的state

JSX核心语法

jsx语法

<script type="text/babel">
    // jsx语法
    const element = <h2>Hello World</h2>;//此处代码在js中执行是不被允许的，会报错
    ReactDOM.render(element, document.getElementById("app"));
  </script>

JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法

此处type="text/babel"是调用jsx语法的标志

只有通过text/babel标记过的代码，才可以进行类似上面使用html标签对变量进行赋值的操作

它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用

书写规范：

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div原生（或者使用后面我们学习的Fragment）

为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写

JSX中的标签可以是单标签，也可以是双标签

注意：如果是单标签，必须以/>结尾

个人理解就是html和javascript可以混着写的意思

关于注释

render() {
        return (
          <div>
            {/* 我是一段注释 */}
            <h2>Hello World</h2>
          </div>
        )
      }

如果需要添加注释，首先是需要在中间使用大括号{ }，来标记出来中间使用的是JavaScript代码，而后在为了注释的方便（可以换行）而选用块注释的语法来添加注释

两种错误的注释方式

return (
          <div>
            //这是错误的注释
            <h2>Hello World</h2>
          </div>
        )

如果是直接在html相关的代码中间插入//来注释是无效的，因为//会被当做是文本而非常尴尬的显示在页面中

return (
          <div>
            <!--这是错误的注释-->//直接就报错了
            <h2>Hello World</h2>
          </div>
        )

如果是使用html代码中<!— --->类型的格式来进行注释，编译器会直接语法报错，这归根结底是写js代码的地方

JSX嵌入数据

constructor(props) {
        super(props);

        this.state = {
          // 1.在{}中可以正常显示显示的内容
          name: "why", // String
          age: 18, // Number
          names: ["abc", "cba", "nba"], // Array
        }
      }

      render() {
        return (
          <div>
            <h2>{this.state.name}</h2>
            <h2>{this.state.age}</h2>
            <h2>{this.state.names}</h2>
          </div>
        )
      }

可以在{}中显示的内容有三种，String，Number，Array

constructor(props) {
        super(props);

        this.state = {
          // 2.在{}中不能显示(忽略)
          test1: null, // null
          test2: undefined, // undefined
          test3: true, // Boolean
          flag: true,
        }
      }

      render() {
        return (
          <div>
            <h2>{this.state.test1 + ""}</h2>
            <h2>{this.state.test2 + ""}</h2>
            <h2>{this.state.test3.toString()}</h2>

            <h2>{this.state.flag ? "你好啊": null}</h2>
          </div>
        )
      }

无法在{ }中显示的内容有null，undefined，boolean(但是可以通过toString( )方法来展示boolean)

constructor(props) {
        super(props);

        this.state = {
          // 3.对象不能作为jsx的子类
          friend: {
            name: "kobe",
            age: 40
          }
        }
      }

      render() {
        return (
          <div>
            <h2>{this.state.friend}</h2>
          </div>
        )
      }

对象不能作为jsx的子类，如果企图在网页中展示子类，浏览器会直接报错

JSX嵌入表达式

constructor(props) {
        super(props);

        this.state = {
          str1: "大风车",
          str2: "吱呀吱溜溜地转",
          isTrue: false
        }
      }

      render() {
        const { str1, str2, isTrue } = this.state;

        return (
          <div>
            {/*1.运算符表达式*/}
            <h2>{ str1+ " " + str2}</h2>
            <h2>{10 * 20}</h2>

            {/*2.三元表达式*/}
            <h2>{ isTrue ? "是": "否" }</h2>

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

      getFullStr() {
        return this.state.str1+ " " + this.state.str2;
      }
    }