React框架相关知识

使用脚手架工具create-react-app配置项目环境

在使用前需要确认node有没有安装

安装

npm install -g create-react-app

创建react应用

create-react-app app-name-demo

在这里由于我在电脑里修改了默认配置的node环境变量，在特定的位置外使用这个命令可能提示不存在，此时可以在前面加npx解决这个问题

npx：是一个包装运行工具，附带npm

主要的依赖：react，react-dom，react-scripts
生成目录结构

public是开放的文件夹，在这里存放的文档不会被webpack处理，会直接复制一份，src储存的文档会被webpack编译
.gitignore，是git的忽略清单文件，一般我们依赖的模块是不希望上传到github库中的，在这里写入不希望被git管理的文件，git就会忽略他
package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号，这里面保存的就是当前环境下依赖的所有包
package.json文件只能锁定大版本，即版本号的第一位，不能锁定后面的小版本，这里保存的其实就是react项目依赖的主要几个库包

命令：

npm start，运行项目
npm run build，打包项目

React项目建设

先清空public，src里的内容
在public中创建index.html，这里存在一个具备id属性的div即可
在src中创建index.js，

App.jsx

这样我们便可以通过npm start 获得hello world了

react常用的组件API就是setState，用于修改组件状态。组件状态，其实就是App类的属性，setState接收一个对象

组件生命周期

在创建组件实例并将其插入DOM时，按以下顺序调用这些方法：

constructor，接收props，初始化state状态，需要先super()，由于class类的特性，子类的constructor中需要执行super函数，将this指向由指向父类便回指向子类
static getDerivedStateFromProps，调用render前调用
render，是类组件中唯一需要的方法，调用此方法会返回一个DOM片段
componentDidMount，挂载组件后调用，就是渲染成功后调用，此处设置订阅

被废弃的方法：componentWillMount，如果想要使用请使用[UNSAFE_componentWillMount()](https://reactjs.org/docs/react-component.html#unsafe_componentwillmount)

重新渲染组件时，按以下顺序调用这些方法：

static getDerivedStateFromProps
shouldComponentUpdate，很少使用，也确实没用到过。接收新的props或state时调用，返回布尔值，默认返回true，返回false，render和componentDidUpdate不会被调用
render，
getSnapshotBeforeUpdate，在最近渲染的输出提交到DOM之前调用，返回的值将作为参数传递给componentDidUpdate，
componentDidUpdate，更新发生后立即调用

被废弃的方法：componentWillUpdate，如果想要使用请使用[UNSAFE_componentWillUpdate()](https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate)

componentWillReceiveProps，如果想要使用请使用[UNSAFE_componentWillReceiveProps()](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops)

从DOM中删除组件时，调用以下方法：

componentWillUnmount，卸载，这里要取消网络请求或清除在挂载时创建的所有订阅

在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。

static getDerivedStateFromError，后代组件发生错误后调用，将错误当做参数传入，返回值来更新状态。
componentDidCatch，接收两个参数，参数有两个，error-引发的错误，info-包含有关哪个组件引发错误的信息

React路由，react-router

安装：npm install react-route-dom --save

　 react-router 这个库实现了路由管理的核心功能，react-router-dom 这个库依赖于react-router，但是它拓展了一下在浏览器环境下运行的一些功能。在使用时，我们只需npm i react-router-dom即可，不需要在单独安装react-router

路由的作用：切换显示视图

react-router的API接口

BrowserRouter，实质上是一个容器，route的所有操作都应该在这个容器里进行，它会保持UI和URL一致性，就是URL变了的时候它会看看内部有没有对应的组件把它给渲染出来
Route，把组件和URL路径给关联起来，path属性设置路径，component设置组件，exact要求路径要匹配一致，strict严格要求路径

Link，实质上就是a标签，
NavLink，与Link作用一致，区别就是NavLink有activeClassName属性能够设置类名，activeStyle设置样式

Switch，switch也是一个容器，用他包裹多个Route，那么这些Route只能同时加载一个
Redirect，重定向，<Redirect from='/to' to='/'/>当你访问from时自动跳转to
withRouter，是一个高阶组件，可获取history

render时会把match，location和history传入props

import React,{Component} from 'react'
import {withRouter} from 'react-router-dom'
class App extends Component{
    console.log(this.props);  // {match: {…}, location: {…}, history: {…}…}
    render(){
      return (<div className='app'></div>)
    }
}
export default withRouter(App);

Prompt，当用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面。

<Prompt message={'确定离开当前界面吗'} when={true}/>其中message为提示框的内容，when接收一个代码块，当返回true时触发，返回false不触发

redux

redux是独立的专门用于做状态管理的js库

redux的结构

redux将项目中的需要被外部管理的状态都放在一个仓库中，所有我们使用redux的时候首先要创建一个这样的仓库store
```
const store = createStore(reducer)
```
reducer是一个纯函数，根据老的state和action产生新的state的函数

可以有很多相互独立的reducer函数，只需要把他们统一输出即可

combineReducers，redux的API，用于将多个reducer统一输出

action是用来创造新的action的函数

import {editname,editpict,editposting}from './actions-type'
const namea=(date)=>({type:editname,date})
const pict=(date)=>({type:editpict,date})
const postinga=(date)=>({type:editposting,date})
export {namea,pict,postinga}

在这里type的值应该是个字符串，我把它放到另一个模块去定义了，直接输入字符串也是可以哒

总结：使用redux应当创建三个模块，一个模块创建store仓库，一个模块提供reducer函数，一个模块提供action创造函数。

redux的使用

当react的某一个组件想要使用store的时候，我们需要将store导入组件

store对象有三个方法：

getState，获取数据，返回指定state值
dispatch，分发事件，将产生的新actin传入，触发reducer函数产生新的state
subscribe，注册监听，当dispatch被调用产生新的action时，会自动调用函数

react-redux

react-redux是专门运用于react项目的状态管理库，他基于redux，使得react的状态管理更加的简洁，符合高内聚，低耦合原则

react-redux有两个API

使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下，你的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。

connect，connect是一个高阶组件，使用方式如下

export default connect(
    state=>({name:state.name,nameword:state.nameword,posting:state.posting})
,{postinga}
)(Posting)

在后一个括号里填入组件名，产生的新的组件会替代原本的组件，新的组件是容器组件，原本的组件是UI组件

前一个括号里接收两个参数

第一个参数是一个函数mapStateToProps()，他建立外部state对象与UI组件内部props对象的映射关系。
mapDispatchToProps是connect函数的第二个参数，可以是一个函数也可以是一个对象，他的目的是在UI组件中确定哪些操作应当是action，传给store。其实就是将创建action的函数传递给组件，组件用一个参数接收。我只使用过对象的形式。对函数并没有了解