我们在编写代码时的主要目光要集中在src这个文件夹内,不过里边的文件都是系统自带的一个模板,我们可以全部删掉然后自己重新编写
我们要想完成循环数据渲染页面,光用脚手架创建是不够的,还需要一个最最最重要的东西,就是组件
组件是什么?
所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。
函数式组件与类式组件
- 函数式组件
-
函数的名称就是组件的名称
-
函数的返回值就是组件要渲染的内容
- 类式组件
-
组件类必须继承
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
})
}
)
}
}
着重点:
Object.keys
——因为我们这里的数据data,是一个对象,但是map方法是数组的方法,所以我们要使用Object.keys
这个方法来获取到一个数组
方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
- react列表渲染时尽量不要把索引(index)设置为key值
React是根据组件上设定的key属性来生成该组件唯一的标识,只有key改变了,React才会更新组件,否则重用该组件。如果想要更新组件内容,请保证每次的key都不一样。
- 父级给子级传递参数,直接在组件内写入你要传递的数据,譬如上方代码,我们给子级传递了具体数据
value={data[item]}
在接收的时候只需要在子级使用props就可以了
4. 最后一个模板里边的内容
import React,{Component} from “react”;
export default class Dl extends Component{
render() {
let {title,list} = this.props.value
return (
{
list.map((item,index)=>{
return
})
}
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
分享一套阿里大牛整理的前端资料给大家,点击前端校招面试题精编解析大全即可获取
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
目、讲解视频,并且会持续更新!**
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
分享一套阿里大牛整理的前端资料给大家,点击前端校招面试题精编解析大全即可获取
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。