React知识点1

1简介

React是有Facebook进行开发与维护的，采取的是react(单向数据流)+redux，使用的是jsx语法，基于webpack的模块化思想进行编辑，一切皆是组件，较为考验原生JS的功底。

我们直接从脚手架开始一步一步分析，react脚手架需要node14以上的版本，直接在官网进行安装node16，然后可以在cmdnode -v 查看当前node版本号 （不是window10的需要升级下系统）

2安装

npm i create-react-app -g //全局安装脚手架

也可以采取淘宝镜像的方法安装 也可以打开react官网进行查看安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

3创建

create-react-app demo //创建项目
cd demo //进入项目
npm start //启动项目

项目创建有可能打不开或者会卡着 可以尝试拔掉网线 打开手机热点进行连接

或者你遇到了版本号不同的错误你可以试试下面这种方法（cmd打开较好）

npm uninstall -g create-react-app 
npx create-react-app@5.0.1 demo //创建项目

4项目目录 我们这里只留下index.js与app.js  对目录进行简单的重置

-demo
	-node_modules //依赖包
	-public //静态资源
		index.html //唯一的页面
	-src //自己的代码
		index.js //入口文件
		App.js //根组件
    .gitignore //不需要托管的代码
	package.json //包的管理文件
		提供了3个命令：
      npm start //启动项目
      npm run build //打包项目
      npm run eject //导出webpack配置文件
	readme.md //说明

JSX中遇到了< 会使用XML解析，遇到了{会用js解析

数据绑定1非表单元素绑定数据 div  {变量} {方法} {表达式}

               2属性 媒体元素 {变量}

               3表单 {变量}

动态样式类名用classname

JSON形式的数据需要json.stringfy一下 在进行展示

5组件创建

函数组件可以通过rfc进行骨架，类组件通过rcc进行触发（vscode插件安装）

 类组件与函数组件对比

1.类定义组件有 生命周期，函数组件没有；

2.父传子的时候，类定义组件通过this.props接收，函数组件通过props接收；

3.类定义组件有state,函数组件没有state.

4.函数组件的性能要比类组件快。