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

使用脚手架搭建开发环境

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里去引入并使用组件

注意事项

1. 导出组件的时候不能加（）小括号
   

2. 每一个组件内部只能有一个最大的盒子
   

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

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

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