react如何完成列表渲染

//识别常规变量
const name = '张三'
//react如何完成列表渲染
//技术方案：map 重复渲染的是那个模板，就return谁
//注意事项：在遍历列表时同样需要一个类型为number/string不可重复的key，提高diff性能
//key仅仅在内部使用，不会出现在真实的dom结构中

const songs = [
  { id: 1, name: '说散就散' },
  { id: 2, name: '稻香' },
  { id: 3, name: '龙拳' },
  { id: 4, name: '南山南' },
]



function App () {
  return (
    <div className="App">
      {name}
      <ul>
        {songs.map(song => <li key={song.id} >{song.name}</li>)}

      </ul>
    </div>
  )
}

export default App