React的条件渲染和列表循环

react的本质

react没有像vue一样的v-for、v-if等指令，一切操作本质上都是通过js的运算生成不同的内容来进行渲染，从而得到不同的页面。

条件渲染的本质

react当渲染undefined、null、空字符串、false时，是不会渲染成任何内容的
如果渲染一个jsx编写的html元素，就会解析html内容并将其渲染为页面上的DOM节点

条件渲染的方式

条件渲染可以通过多种方式，只需要根据一个js表达式的结果来渲染。

if 语句

js 复制代码

import React, { Component } from "react";
export default class Home extends Component {
    state = {
        msg: {
            name: "启示录",
            singer: "G.E.M."
        },
        show: true,
        arr: ["I", "Am", "Gloria", "Word", "Tour"]
    }
    changeState = () => {
        this.state.show = !this.state.show;
        this.setState(this.state);
    }
    fn1() {
        if (this.state.show) {
            return <h1>{this.state.msg.name}-{this.state.msg.singer}</h1>
        } else {
            return <h1>{this.state.msg.name}</h1>
        }
    }
    render() {
        return (
            <>
                <div>条件渲染</div>
                {this.fn1()}
                <button onClick={this.changeState}>修改state</button>
            </>
        )
    }
}

三目运算符

在 JSX 中必须包含表达式，而不是语句。所以在 JSX 中只能使用三元表达式（{表达式}），而不是 if 语句来编写条件。

js 复制代码

import React, { Component } from "react";
export default class Home extends Component {
    state = {
        msg: {
            name: "启示录",
            singer: "G.E.M."
        },
        show: true,
        arr: ["I", "Am", "Gloria", "Word", "Tour"]
    }
    changeState = () => {
        this.state.show = false;
        this.setState(this.state);
        console.log("执行了修改");
    }
    render() {
        return (
            <>
                <div>条件渲染</div>
                {this.state.show ? <h1>摩天动物园</h1> : ""}
                <button onClick={this.changeState}>修改state</button>
            </>
        )
    }
}

&&运算符

js 复制代码

import React, { Component } from "react";
export default class Home extends Component {
    state = {
        show: true
    }
    changeState = () => {
        this.state.show = !this.state.show;
        this.setState(this.state);
    }
    render() {
        return (
            <>
                <div>条件渲染</div>
                <button onClick={this.changeState}>{this.state.show?"显示":"隐藏"}</button>
            </>
        )
    }
}

列表循环的本质

react渲染一个数组会把数组里的每一项单独取出渲染
编写一个里面存放的都是html结构的数组，就会渲染成列表

js 复制代码

import React, { Component } from "react";
export default class Home extends Component {
    state = {
        show: true,
        arr: ["I", "Am", "Gloria", "Word", "Tour"]
    }
    render() {
        return (
            <>
                <div>循环列表</div>
                {this.state.arr}
            </>
        )
    }
}

循环原数据并生成存着html结构的新数组，将新数组渲染为列表

js 复制代码

import React, { Component } from "react";
export default class Home extends Component {
    state = {
        show: true,
        arr: ["I", "Am", "Gloria", "Word", "Tour"]
    }
    render() {
        return (
            <>
                <div>循环列表</div>
                {this.state.arr.map(item => {
                    console.log(item)
                    return <h1>{item}</h1>
                })}
            </>
        )
    }
}

js 复制代码

import React, { Component } from "react";
export default class Home extends Component {
    state = {
        arr: ["I", "Am", "Gloria", "Word", "Tour"]
    }
    addData = () => {
        this.state.arr.push('YYDS');
        this.setState(this.state);
    }
    render() {
        return (
            <>
                <div>循环列表</div>
                <button onClick={this.addData}>添加列表项</button>
                {this.state.arr.map((item, index) => {
                    return <div key={index}>{item}</div>
                })}
            </>
        )
    }
}

循环渲染的唯一索引 key

和vue同理，遍历时必须有唯一索引 key 来提高遍历的效率。

js 复制代码

import React, { Component } from "react";
export default class Home extends Component {
    state = {
        show: true,
        arr: ["I", "Am", "Gloria", "Word", "Tour"]
    }
    render() {
        return (
            <>
                <div>循环列表</div>
                {this.state.arr.map((item, index) => {
                    return <h1 key={index}>{item}</h1>
                })}
            </>
        )
    }
}

vue指令开发和react的jsx开发

vue：各种效果可以用指令进行编写，对于简单的控制很容易

react：各种效果都通过逻辑运算产出对应的渲染内容，能够完整控制整个过程。react比vue是更少的封装，可以去自定义实现。