如何进行条件渲染与列表渲染

在React中是没有指令这个概念的，所以条件渲染和列表渲染都需要通过命令式编程来实现（也就是JS本身的能力）。

条件渲染

既然没有相关的指令，那么就只能通过原生JS来实现条件渲染了，具体方案可采用：

• 条件语句
• 条件运算符
• 逻辑运算符

// 方案一，条件语句
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app); 
let isShow = false;
let element;
if(isShow){
    element = (
        <div>
            hello world
        </div>
    );
}
else{
    element = (
        <div>
            hi react
        </div>
    );
}
root.render(element);

// 方案二，条件运算符
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app); 
let isShow = true;
let element = (
    <div>
        {
            isShow ? 'hello world' : 'hi react'
        } 
    </div>
);
root.render(element);

// 方案三，逻辑运算符
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app); 
// JSX中不会渲染的值：false null undefined ''
let isShow = 0;
let element = (
    <div>
        {
            isShow !== 0 && 'hello world'
        } 
    </div>
);
root.render(element);

列表渲染

列表渲染也是需要通过原生JS来实现，具体方案：

• 循环语句
• map()方法

这里还需要注意一点，就是循环结构的时候还是需要给每一项添加唯一的key属性，这一点跟Vue非常相似。

// 方案一，循环语句
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app); 
let data = [
    { id: 1, text: 'aaa' },
    { id: 2, text: 'bbb' },
    { id: 3, text: 'ccc' }
];
let ret = [];
for(let i=0;i<data.length;i++){
    ret.push(<li key={data[i].id}>{data[i].text}</li>);
}
// ['a', 'b', 'c']  ->  'a,b,c' 
// { ['a', 'b', 'c'] } ->  'abc' 
let element = (
    <ul>
        { ret }
    </ul>
);
root.render(element);

// 方案二，map()方法
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app); 
let data = [
    { id: 1, text: 'aaa' },
    { id: 2, text: 'bbb' },
    { id: 3, text: 'ccc' }
];
let element = (
    <ul>
        {
            data.map(v=><li key={v.id}>{v.text}</li>)
        }
    </ul>
);
root.render(element);