React不是一个框架，是一个用于构建用户界面的JS库，实现单页面利用。React用于在前端构建用户界面（UI）。React是MVC应用程序的视图层（模型视图控制器）。
多页面利用：页面跳转时跳转的都是残缺的html页面
单页面利用：只有一个html页面，所有内容都在这个页面中展现，通过’路由’来加载不同内容。全副是通过js来管制显示的。长处：用户体验比拟好，加载比拟晦涩。毛病：不利于seo(网站优化，影响搜寻排名)，解决办法ssr(服务端渲染)。
起步装置
先决条件 ：全局装置了Node.js和npm。
npm i -g yarn(yarn下载速度比npm快)
办法1 ：npx create-react-app my-app(我的项目初始化)
- npx : npm中的一个性能，npx的执行分3步，第一步：下载脚手架。第二步：应用脚手架装置我的项目。第三步：下载好我的项目之后删除脚手架
- 脚手架：曾经写好的配置相当于一个汇合
- 另外一种装置办法：npm i -g create-react-app create-react-app my-app 先下载好脚手架，再通过脚手架下载我的项目，毛病：版本不自动更新
Create React App解读 ：该环境事后配置了构建React利用所需的所有。它将创立一个实时开发服务器，应用Webpack主动编译React，JSX和ES6，主动前缀CSS文件，并应用ESLint测试和正告代码中的谬误。
初始化我的项目目录构造解读
node_modules : 我的项目依赖包
public : 动态文件 （模板-index.html）
src : 编写前台代码文件夹
index.js ： 入口文件
App.js ： 入口文件中渲染的页面
.test.js ： 测试文件，个别不须要管
serviceWorker.js : PWA的配置文件
.gitignore文件 ： git上传时的疏忽配置文件
package.json ：记录装置信息
"scripts": {
"start": "react-scripts start", //启动开发阶段服务器
"build": "react-scripts build", //打包
"test": "react-scripts test", //运行测试
"eject": "react-scripts eject" //显示暗藏的配置
}
运行npm run eject时，提醒这个命令是不可逆的，
运行后会多出config文件夹和scripts文件夹，
config里边是webpack的配置；scripts里边是启动命令的配置，
个别不执行这个命令JSX语法：
1.在js中能够间接写html
HTML局部：间接写html标签
JS局部 : 写在 { } 内
·babel会把jsx转成React.createElement()
·React.createElement()办法是创立react元素(虚构DOM)的办法
·ReactDom.render()的第一个参数，须要的就是react元素
2.JSX的特点
{ }大括号中写的是js表达式，【注】大括号中不能间接渲染对象，能渲染数组(不能有一般对象)
1. 类名 ： className
<div className='' ></div>
<label htmlfor='' ></label>
2.增加行内款式：
<div id={uid} style={{color:'red',fontsize:'14px'}} ></div>
3. react元素时不可变的，如果须要更新页面显示，就须要创立新的react元素
4.JSX是一个表达式,能够在map循环的代码块中应用JSX，将 JSX 赋值给变量，
把 JSX 当作参数传入，以及从函数中返回 JSX。
在JSX当中，是不能应用if else 的，不过能够应用三元运算表达式
.map(function(ele,index){
return 返回值
})
数组的一个遍历办法,ele是数组元素项，index是下标，return后是返回值
5. JSX属性
1.应用引号来定义以字符串为值的属性
const element = <div tabIndex="0"></div>;
2.应用大括号来定义以 JavaScript 表达式为值的属性
const element = <img src={user.avatarUrl}></img>;
3.style款式应用JSX，写法如下：
<div style={{ color:"red" ,fontSize:"30px"}}></div>元素渲染
React DOM 会负责更新 DOM 来与 React 元素保持一致
语法：ReactDom.render(element,parentNode)
阐明：1.参数1：element为要显示的元素。能够是双标签模式的，也能够是单标签模式的，如果是单标签必须有完结符号
2.参数2：parentNode为元素要显示在页面的哪个标签中。
3.渲染办法个别一个我的项目中只有一个。其余页面通过组件引入或者路由拜访。
4.更新已渲染的元素:React 元素是不可变对象。一旦被创立，你就无奈更改它的子元素或者属性。
react元素写法：
1.间接应用jsx语法： `<div>{变量名}</div>`
2.应用React.createElement()
3.应用组件`<App/>`
组件
- 概念：从概念上相似于 JavaScript 函数。它承受任意的入参（即 “props”），并返回用于形容页面展现内容的 React 元素。组件容许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
-
创立形式有两种：
- 函数式组件:函数式组件在不应用hook语法时，性能特地弱，有hook语法后，要替换类型式组件
function App(props){
return (<div>{props.name}</div>)
}2. 类型式组件 ：后期应用类组件，会学习类组件中的state,生命周期函数
类组件中想要获取props须要用 this.props 来获取
class App extends React.Component{
render(){
return (
<div></div>
)
}
}【留神】不论函数式组件还是类型式组件，必须先引入React，否则报错；return返回的jsx只能有一个顶层标签
类型式组件
- 创立类型式组件
import React,{Component} from 'react'
class Home extends React.Compoent{
return (<div></div>)
}阐明： 1：组件名称首字母要求大写
2：须要继承React.Component这个类
3：必须有一个render函数，render必须return,return后写的是jsx语法
- 导出组件
export {Home}
export default Home- 导入组件
import {Home} from 'path'---->Home名字是自定义
import Home from 'path'- 应用组件
当成标签应用，单/双标签都能够<Home/> || <Home></Home>
组件复用
把页面中的某一块UI拆分进来，做成一个组件，在应用的地位间接屡次调用组件即可
props ： 只读属性，不能改(父传子)
- 当React元素为用户自定义组件时，他会将JSX所接管的属性转换为单个对象传递给组件，这个对象被称之为’props’
- 调用组件时能够通过定义属性的模式来传递数据
<Item data='data' arr={[1,2,3]} /> - 组件应用传递的数据时，通过props对象获取调用数组时传入的数据【注】传递数据时，多个组件第哦啊用定义的属性名要统一
- 能够应用 … 扩大运算符来开展数据(数组)，也能够遍历时传递数据
class Item extends Component{
console.log(this.props) // {data:'string',arr:[1,2,3,4]}
}JSX中的循环
- 不能应用for循环
- 能够应用 map 办法遍历对象或数组
arr/obj.map(function(item,index){
return item
})state ： 定义组件外部本人应用的数据
- 在类组件中有两种定义形式
第一种：在constructor办法中定义
constructor(){
super();
this.state = {
count : 1
}
}第二种：间接在组件中定义
state = {
count : 1
}- 应用state数据 : this.state.xx
- 批改state数据 :
办法1对象模式的 :
this.setState({
count : this.state.count + 1
})办法2函数模式的 ：
this.setState((state)=>{
return {
count : state.count + 1
}
})- this.setState()办法有批量更新性能(意思就是执行最初一次的)
this.setState({count : this.state.count + 1})
- this.setState()办法可能是异步的。当setState间接放在事件的宏工作中执行时是异步的；当setState又被放在别的宏工作中或者其余微工作中时又是同步的(此时被两个以上宏工作包裹 || 被微工作包裹)
this.setState({ },( )=>{ })
setState的函数模式 ：参数state指的永远是最新的数据，是上一次操作完state的后果
this.setState((state)=>{
return {
count : state.count + 1
}
})生命周期函数
生命周期函数也被称为钩子函数，在组建运行过程中在某些特定条件下主动执行的函数。重点：componentDidMount , componentDidUpdate , shouldComponentUpdate , componentWillUnmount
··· componentWillMount 组件行将渲染(可能会网络申请，然而不倡议)
··· componentDIdMount 组件渲染实现(网络申请，全局事件绑定)
··· shouldComponentUpdate 是否容许组件更新(优化应用)
··· componentWillUpdate 组件行将更新(个别不做任何解决)
··· componentDidUpdate 组件更新实现(新的网络申请)
··· compoentWiiReceiveProps 组件接管新的props(个别不做任何解决)
··· componentWillUnmount 组件行将卸载(把全局绑定的事件，网络申请等有副作用的全副革除)
事件零碎
react中本人从新定义了事件零碎，react绑定事件不须要获取到DOM元素，而是把事件绑定定义再虚构DOM上
语法：<div on事件名 = {函数}>《/div>事件名要求采纳驼峰命名法
函数编写模式：
1.间接定义一个箭头函数
2.能够定义函数
如果是类型式组件，须要应用this.clickme,clickme函数定义在类中
class App extends React.Component{
clickme()
render(){
return <div onClick={this.clickme}></div>
}
}
3. this指向问题
在react中，自定义事件中this默认是指向undefined的
如果想让this指向以后组件有以下几种办法：
1.在constructor构造方法中通过bind绑定this
2.应用bind,扭转this指向(能够传参)
3.应用箭头函数(内存开销最大)
如果当函数调用时没有传参，倡议在constructor办法中绑定，如果函数调用时须要传参，间接应用bind绑定更多一些
事件对象
事件对象不须要传递，间接调用就行，在事件对象办法函数形参的最初一个地位
获取坐标信息
阻止默认事件
阻止冒泡
获取事件触发者表单
form标签 <form action=’http://xxx’ method=’get | post’></form>
ajax:不刷新页面，实现部分刷新，form很少用
表单：收集用户输出信息
第一种 : 受控组件(表单数据的显示和更改都是由react的state管制的，使react的state成为'惟一数据源')
第二种 ： 非受控组件(容许用户获取到原生DOM，本人来操作数据)
。。。reart–》es6函数扩大
发表回复