React如何循环数据渲染页面？

我们在编写代码时的主要目光要集中在src这个文件夹内，不过里边的文件都是系统自带的一个模板，我们可以全部删掉然后自己重新编写

组件

---

我们要想完成循环数据渲染页面，光用脚手架创建是不够的，还需要一个最最最重要的东西，就是组件

组件是什么？

所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。

函数式组件与类式组件

1. 函数式组件

• 函数的名称就是组件的名称

• 函数的返回值就是组件要渲染的内容

2. 类式组件

• 组件类必须继承React.Component

• 组件类必须有render方法

类式组件

---

我们这里主要通过类式组件完成实际案例来给大家做一个演示

1. 创建一个index.js并且引入根组件app.js

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./app’;

ReactDOM.render(

,

document.getElementById(‘root’)

);

2. 创建一个app.js作为根组件并引入一个自定义组件

其实我们在这里直接写也可以实现，但是写出来的代码会很臃肿，不够简洁，不符合React组件存在的意义，所以我们在这里在引入一个组件

import React,{Component} from “react”;

import FriendList from ‘./FriendList’;

class App extends Component{

render(){

return (

)

};

}

export default App;

3. 在自定义组件里写入模板框架，引入你的数据与样式，且在引入一个新的组件

import React,{Component} from “react”;

import ‘./FriendList.css’;

import data from ‘./data’;

import Dl from ‘./dl’

export default class FriendList extends Component {

render(){

return (

{

Object.keys(data).map((item,index)=>{

return

})

}

)

}

}

着重点：

1. Object.keys——因为我们这里的数据data，是一个对象，但是map方法是数组的方法，所以我们要使用Object.keys这个方法来获取到一个数组

方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致

2. react列表渲染时尽量不要把索引(index)设置为key值

React是根据组件上设定的key属性来生成该组件唯一的标识，只有key改变了，React才会更新组件，否则重用该组件。如果想要更新组件内容，请保证每次的key都不一样。

3. 父级给子级传递参数，直接在组件内写入你要传递的数据，譬如上方代码，我们给子级传递了具体数据

value={data[item]}

在接收的时候只需要在子级使用props就可以了

4. 最后一个模板里边的内容

import React,{Component} from “react”;

export default class Dl extends Component{

render() {

let {title,list} = this.props.value

return (

{title}

{

list.map((item,index)=>{

return

{item.name}

})

}
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往获取

战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往获取