redux的使用
注意：一共两个插件：react-redux,redux-thunk ；
第一步：引入仓库 import { createStore } from ‘redux’ ；
reducer函数：该函数是处理全局数据状态的函数。当该函数，传入createStore之后，会被第一次调用起来
state: 当前仓库的状态
action: 处理状态的事件对象
在reducer函数中要注意：
1.这个函数必须是一个纯函数。无任何副作用
2.每一次reducer执行，都会把当前的state传入，
在这个函数中，需要根据action的事件，操作state。
操作的方式：不能修改原来的state，返回一个新的state。
除非不需要对state进行任何修改，就返回原来的state。、
1.初始化reducer
const initialState= {键值对}
const reducer = (state = initialState , action)=>{
处理dispatch传过来的action事件
}
2.构建仓库，该仓库管理全局的数据
const store = createStore(reducer);
3.监听仓库的状态。如果状态发生变化，需要知道。才能进行响应(vue/react组件更新)
store.subscribe(()=>{
console.log(‘监听到了变化…’, store.getState());
});
访问仓库的状态
console.log(store.getState());
修改状态，需要派发任务。
dispatch执行，store就会调用reducer函数。
store.dispatch(
// 事件对象：action
{
// 这个对象需要成为一个事件对象，必须要拥有属性type
type: ‘add’,
// 其他属性可以任意扩展
num: 10
}
);
redux-thunk的使用
import { createStore, applyMiddleware } from “redux”;
redux-thunk是redux的插件。
该插件，是增强dispatch的功能。本来dispatch只可以接受action对象。
使用了该插件之后，dispatch可以接收一个函数了,在这个函数中，就可以进行异步操作。
dispatch接收的是一个函数，当dispatch被调用起来时，该函数就会执行，并且函数会接收到dispatch
创建仓库
参数1: 处理数据的reducer
参数2: 仓库使用的插件列表
const store = createStore(reducer, applyMiddleware(thunk));
高阶组件connect的使用
import { connect } from 'react-redux’
高阶组件实际上就是一个函数，传递进去一个组件，会返回回来一个新的组件。
该函数要调用两次，因为该函数是两层函数的嵌套。内部函数才会返回新的组件。
第一次的调用：需要传入两个参数，两个参数都是函数。
参数1: 把仓库中的数据转为组件的props，在组件内部可以直接使用props访问。
在函数中，可以获得仓库的state，和组件的props
返回一个对象，对象的属性会继续合并给props，作为内部组件One组件的props
第一个函数和第二个函数，差别在于接收到的参数不一样。第一个函数接收state，第二个函数接收dispatch
参数2: 把修改仓库数据的dispatch函数封装好，作为组件的props传递到组件内部提供给组件使用。
connect除了实现以上两个函数的功能外，还实现了shouldComponentUpdate的数据浅比较。
第二次的调用：需要需要扩展功能的组件。
fetch的使用
import “whatwg-fetch”;//为了兼容各种浏览器
fetch(‘链接地址’).then(res=>{
// 此时数据还是二进制流
// 处理二进制流
// 方式1: 把二进制流转为字符串
// response.text()
// .then(data=>{
// console.log(data);
// })
方式2: 把二进制流转为json格式的数据
response.json()
.then(data=>{
console.log(data);
})
})
.catch(error=>{
console.log(‘失败:’, error);
}); */
})
以下是发送异步请求实际操作
// 发送请求
/* fetch(’/m-api/banner’)
.then(response=>{
// 得到响应
return response.json();
})
.then(data=>{
// 得到处理好的数据
console.log(data);
})
.catch(error=>{
// 遇到错误了
console.log(‘失败:’, error);
}); */
解决跨域问题
在src文件夹下创建setupProxt.js
const createProxyMiddleware = require(“http-proxy-middleware”);
console.log(createProxyMiddleware);
配置多个代理
module.exports = function (app) {//app实际上是express的服务器对象。
// app.use使用中间件
app.use(
“/m-api”,
createProxyMiddleware({
target: “http://47.98.159.95”,
changeOrigin: true,
})
);
/* app.use(
“/xxx”,
createProxyMiddleware({
target: “http://yyyyyyy”,
changeOrigin: true,
})
); */
};
高级指引Portal
ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。
render prop
术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
在父组件中引入子组件，并且在引入的子组件标签上写入render函数，在函数中就可以接收对应组件（用this.props.render(参数)）传递过来的参数，那么，在这个函数中就可以使用自己本身的数据和对应组件传递过来的数据了。
useState的使用
import React, { useState } from 'react’
react16.8+,新增了Hooks 的功能。
useState让函数式组件拥有跟class一样的功能。
useState调用，传入的参数是state的初始值，
会返回一个数组，数组中第一个位置得到是state值，第二个位置是修改state的函数。
useEffect
import React, { useEffect } from ‘react’
useEffect需要接收一个函数，组件第一次挂载好之后执行，以及每一次更新dom之后执行
// useEffect需要接收一个函数还可以再返回一个函数
// 返回的函数会在下一次调用的useEffect函数之前执行。
// 可以利用返回的函数，来消除useEffect函数带来的副作用。
// useEffect第二个参数是useEffect第一个参数的依赖。
// 只有第二个参数数组列表中的数据发生变化时，useEffect第一个函数才执行。
如果没写第二个参数，就会默认更新全部
如果写了第二个参数但是里面的依赖为空，就会阻止更新，但是依赖必须写
useRef
useRef（）里面可设置一个初始值，可以用.current使用
是专门为函数式组件设置ref属性的hook
hook的规则
// 1.只在最顶层使用 Hook。
// （顶层：函数式组件，自定义的Hook函数。
// 第一次执行会给每一个hook开辟内存空间保存数据业务，而之后更新调用hook都是按顺序使用第一次的hook。
// 只能在顶层使用，为了保证每一次函数式组件执行，hook的个数和顺序都一样，才不会发生错乱。）
###useMemo
useMemo( )相react的计算属性 接收的第一个参数是函数，函数中需要计算得到的结果作为返回值，第二个参数是依赖列表，依赖谁就计算依赖值的结果
useCallback
useCallback 有两个参数 ， 第一个参数是回调函数，它会返回一个依赖的缓存版本，这个回调函数仅在某个依赖项的改变时才会更新。第二个参数是依赖项
useContext
useContext 是函数式组件读取到context的值以及订阅的context的变化
使用：首先在单独的文件引入createContext import {createContext} from 'react'
Const Datacontext = createCntext();
Export default DataContext
第二步在根组件引入该文件 ， 并用该文件的命名.Provider包裹根组件，如果有多个仓库数据需要共享，就需要命名.Provider的嵌套方式。
第三步在需要使用数据的子组件中引入useContext Hook 和仓库文件
在函数式组件中使用useContext（仓库文件的命名）就可以在组件中使用仓库的数据共享。
自定义hook
我们可以单独新建一个文件，在这个文件中自定义Hook
自定义的Hook是一个函数，这个函数必须以use开头
在这个函数中可以使用reactHook的api，根据自己的需求编写属于自己的Hook
最后把需求封装，并return出来
使用方法：
引入自己封装的文件，命名 然后和官方Hook的用法差不多
###react-radux提供的Hook
useStore : 可以获得仓库里的所有方法，例如dispatch() ，getState(),subscribe()等等方法
useselector:提取数据时建议使用回调函数的方式 例如：useselector(state=>state.count)这样的方式
还可以使用闭包的方式传入props来确定提取的内容
usedispatch()这个Hook是从redux存储中返回对函数的引用。我们可以根据需要使用它来调度工作，也就是说我们可以直接把他当成dispatch()来使用
React-router提供的Hook
useHistory,?useLocation,?useRouteMatch,?useParams
有这四种Hook ,也可以不用这几种Hook,用props接收然后再解构出来，也是一样的效果
memo
有两个参数：默认情况下只会对复杂对象做浅层对比（可以直接用memo包裹组件，那么这个组件就可以实现shouldcComponentUpdate浅层比较的效果（props和自身state的对比））
如果想要控制对比过程，那么可以将自定义的比较函数传入第二个参数来实现。
（需要注意的是如果props相等返回true,与shouldComponentUpdate方法的返回值相反）
|