React学习（2）

react的应用，基于脚手架

快速搭建模板项目

 creat-react app 

项目的整体技术框架为：react + webpack + es6 + eslint

具有模块化、组件化、工程化特点

脚手夹文件介绍

主要文件index.html中

应用加壳相关文件

manifest.json

主要文件

app.js、app.css （组件的相关样式）

index.html（页面文件，为单页面，整个react中只有这一个页面）

index.js、index.css （重要入口文件，与root链接最后渲染出来）

当文件中出现这种形式的时候，此非解构复制，一般来说时组件文件中采用了多重暴露

项目的命名：可以新建一个文件夹，通用index.js的命名方法，导入的时候就只用导入文件夹就行了，也就是不用具体到哪一个文件

但是如果同时引入了样式.css表时，相同命名可能会相互覆盖！！因此要及时进行区分

rcc     快速搭建组件框架 安装插件

组件化编码

实现静态组件：组件的拆封、页面拆分、组件抽取

实现动态组件：动态显示初始化数据（数据类型、数据名称、保存在哪个组件中） 交互（绑定事件监听开始）

组件的组合使用-TodoList：

React项目重装依赖全攻略：避免常见陷阱，轻松解决问题 - 云原生实践

解构赋值method：const {keyCode, target} = event

就是指的是keyCode = event .keyCode

npm i uuid/nanoid 

这是一个库 会生成唯一的id

在定义对象的时候

const todoObj = {id: nanoid(), name: target.value, done:false}

 （Header中的方法）

这里是将数据直接挂载到App那个组件 再由app将数据传递给List这个子组件

header中传值给父组件 -> 子传父

状态在哪里，操作状态的方法就在哪里！！！

（在APP中的方法）

删除操作的实现

const donecount = total.reduce((pre, todo) => {return pre + (todo.done ? 1 : 0)}

defaultChecked只在第一次的调用时起作用 

react ajax的学习

react本身只关注于界面

需要通过ajax请求与后台进行交互（传递json数据）

react中需要集成第三方ajax库或者自己封装

常用的ajax请求库：

jQuery比较重，不建议使用

建议axios，较为轻量

yarn add axios //安装axios

跨域问题：

1、package.json：“proxy”:"////服务器地址" （不建议也不常用）

2、和vue3类似，代理服务器

消息的订阅与发布

（消息的传递，兄弟组件之间）

先订阅再进行发布                                                                                                                                                                                                                                                                                                                                                                                 

1、组件订阅消息：会接收到传递过来的数据

2、发布消息：发送数据

消息发布（一个相同的事件，可以多次发布数据）

消息订阅（销毁组件时取消订阅）

拓展：fetch发送请求

1、官方文档

 

React路由

 spa的理解：

  单页面应用，点击页面中的链接不会刷新页面，只会做局部的更新

  数据都需要通过ajax请求获取，并在前端异步来获取

路由的理解：

 路由其实就是映射关系（key:value）的组成

key：路径

value：可能是function 或者 component

 路由的分类：

路由的使用：

1、通过history来进行路径的push或者replace

2、两种工作模式

react-router、react-router-dom的理解

1、react中的一个插件库

2、专门用来实现一个SPA应用

3、基于rect的项目基本都会用到这个库

（印记中文  =》 一个前端的中文文档库）

安装路由插件：

使用路由：1、导航区 2、展示区

内容可以使用的router模式进行包裹，便捷的方法，直接包裹App

<HashRouter>

<BrowaerRouter>

包裹完之后就可以使用类似

导航：<Link .... to:"/myPath">

展示:<Router path="/mypath" component={Home}>

路由组件和一般组件

（学~~学~.~）

<NavLink>比起<Link>稍微高级点点，类似于高亮显示等等

封装NavLink

标签体（是一个特殊的标签属性）和props

对于类似同一个路径对应匹配不同组件

这样就只会匹配第一个路径下的组件

解决样式冲突问题

严格匹配：<Router exact path=?... compnent={myComp}> 路径必须与path一模一样

重定向：即当路由都没有指定的组件，就指向此组件/页面

二级路由相关（嵌套路由）

向路由组件传递参数

1、params参数：直接写在路径里

导航区要传递参数，这里从路径中传递的

展示区接收props参数，进行渲染

2、search参数

key=value&key=value 这是urlencoded编码形式

search模式接收到参数会稍微复杂一点

3、state参数

不是组件的state，是路由

路由的跳转：

路由主要有两种模式：push   replace

开启replace模式：<Link replace={true} ...> 平入不累积

（困死了(ｷ｀ﾟДﾟ´)!!）}

编程式路由导航

oioioooioioioiooo~~

其实就是不直接使用Link等标签，而是操作路由的push或replace这两种模式进行路由跳转

（replace跳转，携带params参数）自定义了两个方法，通过点击触发实现路由跳转

一般组件要使用路由组件的属性，比如this.props.history.push()等属性

import {withRouter} from 'react-router-dom'

->export的时候用withRouter()包裹

（感觉类似于直接用BrowseRouter）

withRouter可以加工一般组件，让一般组价具备路由组件所特有的API

withRouter所返回的值是一个新组件

BroserRouter和HashRouter区别

anto的基本使用（ui组件库）

按需引入

redux仓库介绍（主要实现数据相互的共享仓库）

原理图大致：通过Action Creators把需要处理的事情包装成一个action对象，即需要做什么，通过Store把对象传递到Reduces，Reducers进行最终的加工处理

在使用redux之前，使用yarn add redux进行安装

（在组件中）redux中的状态更改不会帮你重新渲染界面->在类似于界面初始化时，绑定一个对store的订阅事件，在store中有redux值改变时，再调用setState()进行render

全局应用：（可以在index.js入口文件中调用一下就行了）

tips：cnst a = b => ({data:b})  这个格式返回一个对象

一般对象：同步操作；

函数对象：异步操作（需要中间件，函数类型在store中帮忙执行）安装yarn react-redux组件

在store.js中需要引入中间件，作为第二参数传递到createStore（）中

连接容器组件和UI组件

引入store不在容器组件中，在更上层app.js

在容器组件中：

index中引入

即可实现需要为所有容器组件提供store

整合UI组件与容器组件

对之前的结构的优化：

1.UI组件与容器组件可以整合在同一个文件中，对外暴露容器组件就行

2.无需自己给容器组件传递store，对<App/>整体包裹一个<Provide store = {store}>即可

3.使用react-redux后不用自己检测redux中的状态改变了，容器组件可以自动完成此任务

4.MapDispatchToProps也可以简单写成一个对象

数据共享

在redux中存储多组件数据

用对象存储 

纯函数和高阶函数

redux的开发者工具

Redux DevTools

网页的拓展程序中也可以找到，网页插件安装完了之后在VS中继续安装

yarn add redux-devtools-extension

修改store.js中文件

引入redux-devtools-extension  import {ComposeWithDevTools} from ...

遵守如下使用开发者工具的语法规则：

最终编写效果

index.js中

app中（引入的是容器组件）

reducers中创建index.js， 用来汇总其他组件的reducer

reducer是纯函数

store只用引入总的reducers就可以

例如：reducer-count.js

redux-store.js（部分）

redux-action.js（部分）

例如：

项目的打包运行

一般来说执行nom run build操作，打包成文件，部署到服务器上

也可以直接用serve build

React拓展

关于SetState

react状态的更新是异步的

函数式的setState和对象类型的

lazyLoad 懒加载

比如：路由懒加载

引入 Loading

先调用load函数  const Home = lazy(()=> import()''./Home)

注册路由时用Suspense包裹

stateHook

函数式组件使用 

例如：实现函数式组件也可以改变state

EffectHook

实现在函数式组件中也可以用生命周期钩子

RefHook

fragment

Context

不过在应用开发中一般不用context，一般都用它的封装react插件

pureComponent

RenderProps

<A>

<B/>

</A>

用这种格式呈现父子关系调用的话,在A组件的内部要使用{this.props.children}来调用B组件

也可以写作：<A render = {()=><B/>}/> 也是表示AB的父子关系

错误边界ErrorBoundary

当组件错误时会触发相关错误信息事件的调用，只适用于生产环境

捕获的是render函数中的后代组件报错

组件通信方式总结

React Router 6

新版本的router用法

嵌套路由

router5中 Link  NavLink

router6中 Link NavLink（点击切换） Navigate（渲染到页面上才能进行路由切换）

路由传参

路由携带参数  获取参数使用方法

params useParams

search useSearchParams

state useLocation

路由相关