（二）、jsx复用与可读性：保存jsx到变量中

一、保存 jsx 到变量中

1. 因为 jsx 最后也是转换成了 js 函数调用的形式，所以可以吧 jsx 保存到变量中

2. 这样写的好处就是 可以进行多次的复用 提高代码的可读性

function App() {
    const  tags = ['React', 'Vue', 'JavaScript']

    // 头部信息
    const hider = (
        <>
            <h1>这是一个用户信息</h1>
            <p>用户信息页面</p>
        </>
    )

    // 列表信息
    const tagSection = tags.map((item, index) => {
        return (
            <Fragment key={index}>
                <p>{item}</p>
                <hr/>
            </Fragment>
        )
    } )

    // 渲染模板
    return (
        <div>
            {hider}
            {tagSection}
        </div>
    )
}

export default App