2022 React 最速上手指南(三)—— 渲染列表 & 提取组件

简介: 2022 React 最速上手指南(三)—— 渲染列表 & 提取组件

以结果为导向,写给刚学完前端三剑客和想要了解 React 框架的小伙伴,使得他们能快速上手(省略了历史以及一些不必要的介绍)。



渲染列表


我们已经渲染了一些原始变量,接下来我们将渲染项目列表,我们先用示例数据进行实验,然后将其应用于从远程 API 获取数据,定义变量:


const list = [
  {
    title: 'React',
    url: 'https://reactjs.org/',
    author: 'Jordan Walke',
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://redux.js.org/',
    author: 'Dan Abramov, Andrew Clark',
    objectID: 1,
  },
];
function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <label htmlFor="search">Search: </label>
      <input type="text" id="search"/>
      <hr/>
      {/*在这里渲染列表*/}
    </div>
  );
}
export default App;
复制代码


我们使用数组内置的 map() 遍历列表里的每个项目并返回每个项目的 JSX 片段:

  • 举个例子:


const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.map(function(number) {
  return number * 2; 
});
console.log(newNumbers);
// [2, 4, 6, 8, 10]
复制代码
  • 实际应用:


...
function App() {
  return (
    <div>
      ...
      <hr />
      <ul>
        {list.map(function (item) {
          return (
            <li key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
export default App;
复制代码


通过为每个列表项的元素分配 key 属性,React 可以在列表发生更改(例如重新排序)时识别已修改的项目。


在 React 中,你必须为每个列表项指定一个唯一标识,也就是 key 属性,否则会报错,具体可以查看文档


提取组件


为了提高项目的扩展性以及可复用性,React 中有几个关键点:


  • 在 React 应用中,每一块 UI 都应该是一个组件
  • React 组件是常规的 JS 函数,但它们的名字都是以大写字母开头,且返回 JSX 代码

所以我们可以将 App 组件中的这部分职责分解成一个独立的 List 组件:


function List() {
  return (
    <ul>
      {list.map(function (item) {
        return (
          <li key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
          </li>
        );
      })}
    </ul>
  );
}
复制代码


然后就可以在 App 组件中使用 List 组件了:


function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <label htmlFor="search">Search: </label>
      <input type="text" id="search" />
      <hr />
      {/* 创建一个 List 组件实例 */}
      <List />
      {/* 创建另一个 List 组件实例 */}
      <List />
    </div>
  );
}
export default App;
复制代码


一旦我们定义了组件,我们就可以在 JSX 的任何地方像使用 HTML 元素一样使用它,就像 JS 类的定义一样,你可以根据需要创建任意数量的组件示例


因为 List 组件在 App 中渲染,我们可以说 App 是一个父组件,每个 List 都是一个子组件。大一点的 React 应用都会有一个组件树,也可以说是组件层次结构。


在组件树中,App 是根组件,它可以有多个子组件,List 也是,如果 App 组件有其他子组件,那这个子组件可以称为 List 组件的兄弟组件。


image.png

专栏


因为参加打卡活动是每日更新,所以可能比较短小,可以关注一下 React 入门专栏

在更新完后会整合为一整篇,感谢关注和点赞!

目录
打赏
0
0
0
0
7
分享
相关文章
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
React 元素渲染
10月更文挑战第7天
42 1
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求,合理运用相关特性和策略,不断进行优化和调整,以达到最佳的性能提升效果。同时,要密切关注 React 的发展和更新,以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法,让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
149 59
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
76 6
React 列表 & Keys
10月更文挑战第9天
26 0
React 条件渲染
10月更文挑战第9天
43 0
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。
React 中无渲染组件
【8月更文挑战第31天】
58 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等