前言
React 中的 Fragment 是一种轻量级的组件，用于包裹一组子元素而无需添加额外的 DOM 元素。它们特别有用，因为 React 要求在返回多个元素时将它们包裹在一个容器元素内，而 Fragment 允许你绕过这一限制。
使用 Fragment，你可以更清晰地组织你的代码，而无需引入多余的父级 DOM 元素。这在渲染列表或条件性元素时尤其有用。Fragment 的语法非常简单，只需使用 <React.Fragment> 或简写形式 <> 包裹你的子元素即可。
除了提高代码的可读性和性能外，Fragment 还有助于减少不必要的 DOM 嵌套，有助于更好地维护和调试代码。总之，React 的 Fragment 是一个强大的工具，可以帮助你更好地组织和优化你的组件树，提高应用的性能和可维护性。
Fragment
- 由于 React 规定, 组件中只能有一个根元素
- 所以每次编写组件的时候, 我们都需要在最外层包裹一个冗余的标签
import React from 'react'; class Home extends React.PureComponent { constructor(props) { super(props); this.state = { heroList: ['鲁班', '虞姬', '黄忠'] } } render() { return ( <div> <p>{this.state.heroList[0]}</p> <p>{this.state.heroList[1]}</p> <p>{this.state.heroList[2]}</p> </div> ) } } class App extends React.PureComponent { render() { return ( <Home/> ) } } export default App;
- 如果不想渲染这个冗余的标签, 那么就可以使用
Fragment来代替
import React from 'react'; class Home extends React.PureComponent { constructor(props) { super(props); this.state = { heroList: ['鲁班', '虞姬', '黄忠'] } } render() { return ( <React.Fragment> <p>{this.state.heroList[0]}</p> <p>{this.state.heroList[1]}</p> <p>{this.state.heroList[2]}</p> </React.Fragment> ) } } class App extends React.PureComponent { render() { return ( <Home/> ) } } export default App;
语法糖
- React.Fragment 的简化写法
import React from 'react'; class Home extends React.PureComponent { constructor(props) { super(props); this.state = { heroList: ['鲁班', '虞姬', '黄忠'] } } render() { return ( <> <p>{this.state.heroList[0]}</p> <p>{this.state.heroList[1]}</p> <p>{this.state.heroList[2]}</p> </> ) } } class App extends React.PureComponent { render() { return ( <Home/> ) } } export default App;
- 如果需要给 Fragment 添加 key, 那么就不能使用语法糖写法
import React from 'react'; class Home extends React.PureComponent { constructor(props) { super(props); this.state = { heroList: ['鲁班', '虞姬', '黄忠'] } } render() { return ( <> { this.state.heroList.map(name => { return ( <React.Fragment key={name}> <p>{name}</p> </React.Fragment> ) }) } </> ); } } class App extends React.PureComponent { render() { return ( <Home/> ) } } export default App;
官方文档
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
