目录

目录

react初步

第一个react代码

创建组件

函数组件（箭头函数）

创建类组件

组件嵌套

JSX原理

组件中的样式

三方包

-三方包

react目录

组件的数据挂载

props

prop-types三方包

state

模板渲染语法

用map

TML

props向下传递技巧

事件

tips

为什么不直接把逻辑写在标签中

为什么使用箭头函数

传参

键盘事件

ref

改变完成功能

健壮代码

解决更改一组数据导致todos全部重新渲染的问题

生命周期

挂载

()

ops()

()

()

更新

组件更新的生命周期调用顺序

e()

ate()

卸载

()

额外的APIs

使用AJAX

axios

react-hooks（新）

组件通信

HOC

高阶组件概要

高阶组件props传值

​装饰器

状态管理

传统MVC框架的缺陷

Flux

Redux

自己实现Redux

使用Redux

三个概念

redux中的文件

react-redux

异步

标准的redux工作模型

本质上是一个现在JS应用程序的静态模块打包器，当处理应用程序时，会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个

入口：指示应用使用哪个模块来作为构建内部依赖图的开始

输出：在哪里输出它所创建的以及如何命令这些文件

：只能理解JS和JSON文件，让能够去处理其他类型的文件并将他们转换为有效模块以供应用程序使用以及被添加在依赖图中

插件

模式：通过选择、或none之中的一个来设置mode参数，默认值为

如果没有任何配置的话会自动查找src下的index.js

插件们

html--：可以使用自己的html文件用来打包

mini-css--：在打包时可以令css文件单拎出来

-dev-：基于的本地服务器 => 自动刷新页面

-：有一些css属性在特殊的情况下是要加前缀的，使用此插件自动生成前缀（一些电脑浏览器可能需要加前缀 => 浏览器兼容性）

file-：打包时处理文件（图片）等

copy--：有的时候有些东西不需要处理，比如字体文件。用此插件进行拷贝：将某些资源直接原封不动的拷贝过去

babel-

react初步

react：用于构建用户界面的库

创建脚手架

npm -g -react-app

-react-app 项目名

or

npx -react-app 项目名

版本16开始写法发生了重大改变/16.4/16.8

第一个react代码 创建组件 函数组件（箭头函数）

名字要大写开始

const App = (props) => {return (
Welcome {props.title}!!
优秀的{props.title}
)
}ReactDOM.render(,document.querySelector('#root')
)

原理如下：

const app：这种方式可以理解为创建了一个简单的react元素

react中只有一个语法就是花括号{}

中如果有多行，则使用（）防止报错 => 把括号里的内容都当做一个域值类

只要在jsx里要插入js的代码，就加一层花括号即可，注释也是js

创建类组件

使用类来继承React下的

要使用this.props.title

这样写会报错，因为app不是

所以要调用实例上的方法

//定义组件的第二种方法：使用类
class App extends React.Component {render() {return (
类组件!!
{this.props.title }
)}
}const app = new App({title:'class'
}).render()render(app,document.querySelector('#root')
)

在以前，使用这种方法来创建一个类组件，现在已经运行不起来了

React.createClass({render() {return 
xxx
}
})

是react dom 提供的一个方法，这个方法通常只会用一次

组件嵌套

JSX原理

底层编译原理

import React from "react";
import ReactDom from "react-dom";//这里是使用类的形式创建的组件
class App extends React.Component {render() {return (React.createElement('div',{className: 'app',id: 'appRoot'},React.createElement('h1',{className:'title'},'JSX原理'),React.createElement('p',null,'类组件是继承React.Component的')))}
}//这里是一个表示虚拟DOM树的方式
const appVDom = {tag: 'div',attrs: {className: 'app',id: 'appRoot'},children: [{tag: 'h1',attrs: {className: 'title',},children: ['JSX原理']}, {tag: 'p',attrs: null,children: ['类组件是继承React.Component的']}]
}render(,document.querySelector('#root')
)

React.是一个方法，用于创建元素，可以有很多的参数，但是前两个是固定的，第一个可以理解为标签名，第二个可以理解为标签的属性，剩下的就继续写更多的子元素。

React.(type，[props]，[...])

组件中的样式

render() {return (
元素中的样式
)}orclass App extends Component{render() {const style = {color:'purple'}return (
元素中的样式
)}
}

两个花括号：第一个表明要在JSX中写JS，第二个表明要写一个对象

三方包

要动态添加不同的就可以使用第三方包：

-三方包

独立css内容

import { render } from "@testing-library/react";
import React, {ReactDom,Component} from "react";
import './index.css'
import className from "classnames";
import styled from 'styled-components'const Title = styled.h1`color:green
`class App extends Component{render() {const style = {color:'purple'}return (
使用style内联创建
使用class的方式，但是在react中class要写成className
要动态添加不同的className就可以使用第三方包：classNames
styled-component的使用
)}
}render(,document.querySelector('#root')
)

react目录

index.js是入口文件

App.js整体的单一应用的入口文件 （插件中：rfc创建函数式组件，rcc创建继承式组件）

组件的必须只有一个根元素

如果使用div的话就会额外生成一层标签，可以使用 => 用来展示空标签，也可以直接写空标签

组件的两种导出方式

组件的数据挂载 props

可以用props传递任何的东西

可以理解为props是组件外部传入的

类组件就用this.props.

函数式创建组件可用props传参

继承式创建组件使用this获取参数

prop-types三方包

如果传入的时候没有传入数字，但是接受者想要数字而非字符串的话 =>抛出异常 =>可使用此包

desc="今日" x="1" y="2">

除了检查数据类型，还可以检查该元素是否为必要的

x: ..,

在继承式组件中使用

export default class TodoInput extends Component {static propTypes = {btnText:PropTypes.string}
...
}

是静态属性的意思，静态属性是类的属性，而不是类的实例的属性

这里的可以理解为：这个组件是用来检查创建类的实例是否符合要求，实例里是不需要有这个属性的，所以要使用（且必须使用） = {}

设置默认值

之前使用的是 this.props. || '',此包可以用来设置默认值

优先级是传入值>默认值（）

export default class TodoInput extends Component {static propTypes = {btnText:PropTypes.string}static defaultProps = {btnText:'添加TODO'}render() {return (
{this.props.btnText}
)}
}

state

组件内部的状态

只有类组件有哦，函数式组件没有状态。

所以类组件也叫状态组件

函数式组件是受控组件（props只能是让传递给子组件的父组件来改内容，自己改不了）

第一种定义方法：直接在组件中state={}

第二种定义方法：在组件中，() {this.state = { }}

注意：函数式组件里无this，无state。（后边16.8会有）

模板渲染语法 用map

蓝框就是用花括号语法写的js代码

{ this.state.todos.map(todo => {return 
{todo.title}
})}...

TML

如果想渲染html语法，则使用TML

{
}...

props向下传递技巧

使用扩展运算符

{this.props.todos.map(todo => {return (// )})}

添加事件修改数据不能直接对数据进行操作，能修改数据但是界面不会重新渲染（非要渲染的话要用强制渲染）

this.state. = !this.state.这样不行

修改数据要使用

方法有两个参数：

由于参数是异步的，如果想获取最新的state，要在回调中获取

  handleLikedClick = () => {//第一种情况// this.setState({//   isLiked:!this.state.isLiked// })this.setState((prevState,props) => {return {isLiked: !prevState.isLiked}})}

是异步的

事件

事件命名采用on+事件名驼峰命名方式，接箭头函数

tips 为什么不直接把逻辑写在标签中

不推荐这种方式：是匿名函数，事件是箭头函数，每一次，都重新渲染生成了匿名函数

所以把事件提到外边去

推荐这种方式

为什么使用箭头函数

this的指向问题

但是这种可以传参

但是bind放到里性能不好，需要每次都渲染

可以放到中

传参

第一种不推荐

不能直接=this.(123)，这样的话还没点击就已经渲染到页面上了

第二种用bind，就是上边的

特别推荐：第三种：把传参的东西作为子组件

如果想用push

键盘事件

ref

react使用ref需要

改变完成功能

在react中，只要是数据控制的，就没办法在页面上操作DOM修改

三级组件传递

更健壮的

健壮代码 解决更改一组数据导致todos全部重新渲染的问题

第一种方法：利用生命周期e =>原理如下，深层比较可以用递归

第二种方法：将换成，但是只做了第一层比较

生命周期

函数式组件没有生命周期

静态方法没有this，静态方法属于class上的方法，不是实例的方法，在实例创建之前就已经存在了

挂载 ()

在React 组件挂载之前，会调用它的构造函数。

他是受控组件，只会执行一次

老版本的坑：里面通过props来初始化了一个state，在props修改之后，这个state不会再次更新，那么就需要借助于Props来做一次修正

新版

ops()

在调用 方法之前调用，并且在初始挂载及后续更新时都会被调用。

()

() 方法是 class 组件中唯一必须实现的方法。

()

在组件挂载后（插入 DOM 树中）立即调用。

AJAX

还有俩生命周期：() =>()和() => 中

更新

触发更新：props发生改变、state发生改变、强制更新()

组件更新的生命周期调用顺序

ops()

直接就行

e()

默认返回true，返回false时不会重写

此生命周期有两个参数

()

ate()

()

卸载 ()

在组件卸载及销毁之前直接调用

额外的APIs

()

()

使用AJAX axios

正常应该是先post把数据提交给后端，然后再获取展示

react-hooks（新）

让函数式组件也能解决生命周期等的问题

是一个方法，参数是默认值，结果是一个数组，数组的第一个就是state，第二个相当于

{ } from 'react'

：的第二个参数，和不一样的地方在于参数，这里的参数就是一个新值即可

可以理解为创建了一个监听

等价于和，在初始加载和更新的时候都能监听到

的参数是一个回调，组件挂载和更新都会触发这个回调方法

组件通信

import React, { Component, createContext } from 'react'
import { render } from 'react-dom'const {Provider,Consumer: CounterConsumer //解构出来重新赋值给一个CounterConsumer的组件
} = createContext()//封装一个基本的Provider，直接使用不方便管理状态
class ConterProvider extends Component {constructor() {super()//这里的状态就是共享的，任何被这个组件所包裹的标签都可以通过CounterConsumer来接收这个值this.state = {count:100}}increment = () => {this.setState ({count:this.state.count+1})}decrement = () => {this.setState({count:this.state.count-1})}render() {return ({this.props.children})}
}class CounterBtn extends Component {render() {return ({({onIncrement,onDecrement}) => {const handler = this.props.type === "increment" ? onIncrement : onDecrementreturn ({this.props.children})}})}
}class Counter extends Component {render() {return ({({count})=> {return ({count})}})}
}class App extends Component {render() {return (<>-+)}
}render(,document.querySelector('#root')
)

是react提供的一个用于跨组件传值的方法

方法的结果是一个对象，里边有和

用于提供状态，用于接收状态

在中封装一个基本的，所有被这个组件包裹的标签都可以通过来接收这个值，可以传递数据也可以传递方法

使用组件时，必须有一个value值，这个value可以传递任何的数据，一般传递一个对象比较合适

组件中使用来接收count值，要注意组件的必须是一个方法，这个方法有一个参数，参数是的value值

HOC 高阶组件概要

-Order

var add = (x,y) => {return x+y
}
add(1,2) //3var add = (x) =>｛return (y) => {return x+y}
｝
add(1)(2) //3

外边这一层函数就是高阶函数 =>函数能一个函数，对于react来说箭头函数本身就是组件，所以可以一个react组件 =>外边的函数就是高阶组件 （了一个组件）

网页内容：这是高阶组件内容

高阶组件可以劫持组件的渲染