学习记录——react组件和环境搭建

最新推荐文章于 2023-11-20 21:49:40 发布

　　　SakuraZr

最新推荐文章于 2023-11-20 21:49:40 发布

阅读量242

点赞数

分类专栏： react 文章标签： react javascript

本文链接：https://blog.csdn.net/sakura_zr/article/details/108401327

版权

19 篇文章 0 订阅

订阅专栏

使用脚手架搭建开发环境

npm install create-react-app -g 下载全局的脚手架
create-react-app -V 查看版本号
create-react-app project(项目名字)  创建项目

下载完后会有一个project文件夹，里面的结构目录如下：
在这里插入图片描述

进入project项目文件后，执行npm run eject可以暴露出react的相关配置文件
在这里插入图片描述

npm start启动项目

react中的组件
函数式组件类组件
组件首字母必须要大写

函数式组件
创建的时候声明一个函数
必须返回一个虚拟dom

在这里插入图片描述

在views 新建home文件夹→Home.js Me文件夹→Me.js
在这里插入图片描述
到App.js里：引入组件

打开页面查看，成功渲染出来：

类组件
创建一个类 继承React.Component类
自带一个render函数

views下新建classComponent.js文件：
在这里插入图片描述
和函数组件一样的方式去使用，App.js里去引入并使用组件

注意事项

函数式组件
一个函数就是一个组件，return一份DOM
特点：
①没有生命周期，也会被更新并挂载，但是没有生命周期函数
②没有this（组件实例）
③没有内部状态（state）

类组件
有this，有生命周期，有内部状态（state）

如果你的组件没有涉及到内部状态，只是用来渲染数据，那么就用函数式组件，性能较好

关注