React学习笔记(一)：基础

创建react项目

1、安装react的脚手架，全局安装一次即可 cnpm install -g create-react-app
2、使用手脚架创建项目，在要创建项目的目录下输入 create-react-app 你的项目名
3、cd到项目中运行 npm start

项目结构

favicon是打开网页时标签上显示的icon。
index.html就是唯一一个页面，所以也叫单页面应用。不用管。
manifest.json是允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中。不用管。
assets放静态资源，比如images和css。
components放我们自己写的组件。
APP.js是根组件。
APP.test.js是测试文件。不用管。
index.js是入口文件。
serviceWorker.js是加快react渲染速度的服务文件，不用管。
.gitignore是提交git是要忽略的文件，手脚架已经帮我们写好，不用管。
package.json是显示我们项目所需的依赖，还可以配置运行命令和服务。
README.md就是项目说明书。

组件的格式、使用、JSX语法

在这里插入图片描述
这是根组件，一般根组件不写内容，只挂载子组件。
这里展示了组件的基本写法：
1、引入react，import React, { Component } from ‘react’
2、写一个class去继承Component，然后内部使用render函数，return一个模板，在模板中写html内容。创建class，如果安装了插件，可按cccs快速创建。
3、对外暴露该组件，export default App。

导入组件，import Home from ‘./components/Home’。
导入css，import ‘./assets/css/App.css’。
使用组件，以html标签形式使用，可以单标签或双标签。
JSX语法，在return中写html代码，这种js和html混写就是jsx语法。
注释，在模板中注释要加额外的花括号。

其余要点
1、html标签不能像H5那样可以省略斜杠。
2、小写开头的标签是html标签，大写开头的标签是组件。
3、如果要return多行代码，要加括号包裹。
4、return里面只能有一个根节点。

如果你就是不想用比如一个div来包裹当作一个根节点破坏自己的层次结构，怎么办？
在这里插入图片描述

Fragment，这是react为我们提供的占位符，不会渲染成任何标签。
1、导入Fragment，如图一所示。
2、以标签形式使用Fragment当作根节点，如图二所示。

构造函数、state、数据渲染

在这里插入图片描述
1、class里面会自带构造函数，写了构造函数就必须要写super()，要继承父类方法，要不然报错。
2、super最好写在第一行。
3、props用来父子组件传值，可以省略，但养成固定写法习惯
4、在构造函数里可以定义state对象，里面存放你的数据，这是官方写法。
5、state也可以定义在构造函数外面，这样就能省略this和构造函数了。
6、渲染state里的数据，{this.state.user.username}。
7、当state里的数据发生改变时，render函数会重新渲染模板。

绑定属性

在这里插入图片描述
这是把state里面储存着数据的变量绑定到属性上。
1、常规绑定，title={this.state.title}。
2、绑定class，class在js中是关键字被占用，所以写成className。
3、绑定for，for在js中是关键字被占用，所以写成htmlFor。
4、绑定行内样式，以对象形式传递样式。

渲染图片

在这里插入图片描述

渲染本地图片法一：
1、在头部把图片以模块形式导入，import logo from ‘…/assets/images/logo.svg’。
2、绑定img的src属性，src={logo}。
渲染本地图片法二：利用ES5语法导入，src={require(’…/assets/images/logo.svg’)}。
渲染远程图片：src直接写图片的url，如图所示。

循环渲染数据

在这里插入图片描述

图一是我们要循环渲染的数据。
法一，如果数据内自带html标签，可直接渲染，{this.state.list2}。
法二，如果没有，则：
1、先往数据内插入html，使用es6的map函数，往每一项插入li标签，如图2所示，写的位置与模板中的return同级，写在return的上面就行。
2、再进行渲染，因为是li标签，所以放在ul里面，如图3所示。
法三：直接在ul标签里进行插入li标签的操作并渲染，如图3所示，常用。

注意：循环渲染的每一项必须要有指定不同的key，要不然报错，所以可以在数据中添加，也可以在map循环中添加，记得加在根节点上，如图所示，key={key}。

绑定函数

在这里插入图片描述
绑定函数法一：把当前this对象传递进去，onClick={this.getMsg.bind(this)}，为函数传参时会用到。
绑定函数法二：在构造函数内把当前this对象传递进去，this.getMsg2=this.getMsg2.bind(this);不常用，麻烦。
绑定函数法三：使用箭头函数定义函数，getMsg3 = () => { … }，常用，简单。

函数定义在与构造函数平行同级的地方就行了。
函数之间不需要逗号隔开。
绑定函数时，不需要加括号，要不然就变成立即执行。

如果不加括号如何传递参数呢？
在这里插入图片描述
如上图所示，使用bind传参，第一位参数必须是this，然后可以传无数个参。

数据双向绑定

在这里插入图片描述

react没有提供MVVM的双向绑定，要自己写。

1、先绑定value属性，value={this.state.input}。
2、绑定(监听)onChange事件，onChange={this.inputChange}。
3、value发生变化时，value的值存储在onChange的事件对象中：e.target.value,将其赋值给绑定了value属性的state中的变量，如图一所示。

setState是react中唯一改变state中的数据的方法。