React如何进行列表循环

使用map方法，对每一条数据进行循环，循环的值会产生一个新的数组，React检测到数组里面有标签会自动展开，再给每一个循环的标签设置一个唯一KEY可以让提高性能让React最小密度更新。

import './Hello.css';
import { useState } from 'react';

export default function Hello() {
    let [arr, newarr] = useState([{ title: '标题1', url: 'http://localhost' }, { title: '标题2', url: 'http://localhost' }, { title: '标题3', url: 'http://localhost' }, { title: '标题4', url: 'http://localhost' }])
    return (
        <div>
            <ul>
                {
                    arr.map((v, i) => <li className={i === 0 ? 'h1' : ''} key={i}><a  href={v.url}>{v.title}</a></li>)
                }

            </ul>
        </div>
    );
}