零经验学 react 的第6天 - 循环渲染和条件渲染

一、循环渲染和条件渲染要点

• 使用 map 或者 filter 来循环渲染, 循环项绑定 key，提高性能
• 使用 三元表达式、&&、if..else 来进行条件渲染

二、 注意点

• 条件渲染中，如果不需要返回一些东西，可以 return null
• 条件渲染中 num && message, 当 num=0 最终效果会渲染 0, 所以应该写成 num>0 && message

三、示例代码

函数组件示例代码

import { useState } from "react";

function Test1 () {
    const [a, setA] = useState(1);
    const [b, setB] = useState(11);
    const [arr, setArr] = useState([1, 2]);
    const [arr1, setArr1] = useState([22, 33]);
    const [obj, setObj] = useState({x: 1, y: 2});
    const [show, setShow] = useState(true);
    
    // 循环渲染
    const renderList = () => {
        let list = [];
        arr1.forEach((item, index) => {
            list.push(<p key={index}>{index}---{item}</p>);
        });
        return list;
    }
    // 过滤循环渲染
    const renderFilteredList = () => {
        let list = [];
        arr1.filter(item => item % 2 === 0).forEach((item, index) => {
            list.push(<p key={index}>{index}---{item}</p>);
        });
        return list;
    }
    // 条件渲染
    const renderContent = () => {
        if(show) {
            return <p>使用if else1111</p>;
        } else {
            return <p>使用if else2222</p>;
        }
    }
    return (
        <div className="test1-box">
            <p>Test1</p>
            <div>
                {/* 循环渲染、过滤循环渲染 */}
                <div>
                    <p>循环渲染</p>
                    <div>
                        {
                            arr.map((item, index) => (
                                <p key={index}>{index}---{item}</p>
                            ))
                        }
                    </div>
                    <p>使用函数来处理循环渲染的逻辑</p>
                    <div> {renderList()}</div>
                    <p>过滤循环渲染</p>
                    <div>
                        {
                            arr.filter(item => item % 2 === 0).map((item,index) => {
                                return <p key={index}>{index}==={item}</p>;
                            })
                        }
                    </div>
                    <p>使用函数来处理过滤循环渲染的逻辑</p>
                    <div>{renderFilteredList()}</div>
                </div>
                
                
                {/* 条件渲染：使用三元表达式、&&、if else */}
                <div>
                    <p>条件渲染</p>
                    <div>
                        <button type="button" onClick={() => setShow(!show)}>切换显示/隐藏</button>
                        {/* 使用三元表达式 */}
                        <div>{show ? <p>使用三元表达式1111</p> : <p>使用三元表达式2222</p>}</div>
                        {/* 使用&& */}
                        <div>{show && <p>使用&&1111</p>}</div>
                        {/* 使用if else */}
                        <div>{renderContent()}</div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Test1;

类组件示例代码

import React from 'react';

class Test2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 1,
            b: 11,
            arr: [1,2],
            arr1: [22,33],
            obj: {x: 1, y: 2},
            show: true
        }
    }
    // 循环渲染
    renderList() {
        let list = [];
        this.state.arr1.forEach((item, index) => {
            list.push(<p key={index}>{index}---{item}</p>);
        });
        return list;
    }
    // 过滤循环渲染
    renderFilteredList() {
        let list = [];
        this.state.arr1.filter(item => item % 2 === 0).forEach((item, index) => {
            list.push(<p key={index}>{index}---{item}</p>);
        });
        return list;
    }
    renderContent() {
        if(this.state.show) {
            return <p>使用if else1111</p>;
        } else {
            return <p>使用if else2222</p>;
        }
    }
    render() {
        return(
            <div className="test2-box">
                <p>Test2</p>
                <div>
                    {/* 循环渲染、过滤循环渲染 */}
                    <div>
                        <p>循环渲染</p>
                        <div>
                            {
                                this.state.arr.map((item, index) => {
                                    return <p key={index}>{index}---{item}</p>
                                })
                            }
                        </div>
                        <p>使用函数来处理循环渲染的逻辑</p>
                        <div>{this.renderList()}</div>
                        <p>过滤循环渲染</p>
                        <div>
                            {
                                this.state.arr.filter((item) => item % 2 === 0).map((item,index) => {
                                    return <p key={index}>{index}---{item}</p>
                                })
                            }
                        </div>
                        <p>使用函数来处理过滤循环渲染的逻辑</p>
                        <div>{this.renderFilteredList()}</div>
                    </div>
                    {/* 条件渲染：使用三元表达式、&& if..else */}
                    <div>
                        <p>条件渲染</p>
                        <button type="button" onClick={() => this.setState({show: !this.state.show})}>切换显示/隐藏</button>
                        {/* 使用三元表达式 */}
                        <div>{this.state.show ? <p>使用三元表达式1111</p> : <p>使用三元表达式2222</p>}</div>
                        {/* 使用&& */}
                        <div>{this.state.show && <p>使用&& 1111</p>}</div>
                        {/* if..else */}
                        <div>{this.renderContent()}</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Test2;