## useEffect
* 1、用来代替componentDidMounted、componentDidUpdate、componentWillUnmounted。
* 2、副作用（dom 操作，数据请求、组件更新）
* 3.无阻塞更新。
## useRef
* 1、获取dom，获取dom元素的值
* 2、保存变量
```
import {useRef} from 'react'
const State = () => {
    const ref = useRef(null);
    const save = useRef({value:99})
    const btnClick = ()=>{
        save.current.value = ref.current.value;
        console.log(save.current.value);
    }
    return (
    <div>
        state--{save.current.value}
        <input type="text" ref={ref} />
        <button onClick={btnClick}>按钮</button>
        </div>
    );
};
export default State;
```
## useContext
* 用于跨组件传值，和createContext配合使用。
* 父组件使用createContext 执行以下创建一个容器。容器里面放入需要传递的值，然后容器包含子组件。
* 子组件使用useContext接收父组件创建的容器。接收到的这个值就可以使用了。
```
import {createContext,useContext,useState} from 'react'
const State = () => {
    const fatherContext = createContext(null);
    const [count,setCount] = useState(0)
    const ChildContext = ()=>{
        const count = useContext(fatherContext)
        return(<div>
            子组件--{count}
        </div>)
    }
    const btnClick = ()=>{
        setCount(count + 2)
 
    }
    return (
        <div>
            <fatherContext.Provider value={count}>
                <ChildContext />
             
                <button onClick={btnClick}>父组件按钮</button>
            </fatherContext.Provider>
        </div>
    );
};
export default State;
```
## useMemo
* 和```shouComponentUpdate```作用类似，父组件传递给子组件变量的时候，会引起子组件的重复更新，在渲染过程子组件使用useMemo控制变量是否重新渲染。
* useMemo使用```memizatipn```提高性能。缓存技术。
* ```useEffect```是在```componentDidMount```组件挂载以后执行的。```useMemo```实在组件渲染的时候执行的。
```
import { useEffect, useMemo, useState,} from 'react'
const State = () => {

    const [num,setNum] = useState(0)
    const [count,setCount] = useState(0)
    const numFun = ()=>{
        setNum(num + 1)
        console.log(num,'father--num')
    }
    const countFun = ()=>{
        setCount(count + 1)
        console.log(count,'father--count')
    }

    //memo
    let res = useMemo(()=>{
        return {
            num,
            count
        }
    },[num,count])
    return (
        <div>
                父组件--count:{res.count}--num:{res.num}  <br />
                <button onClick={numFun}>父组件按钮 num</button> <br />
                <button onClick={countFun}>父组件按钮 count</button> <br />
                <ChildContext res = {res}/>
          
        </div>
    );
};
//子组件
const ChildContext = (props)=>{
    const res = useMemo(()=>{
        return {
            num:props.res.num,
            count:props.res.count,
        }
    },[props.res.num])
    return(
        <div>
            子组件:--num{res.num} -- count -- {res.count}
        </div>
    )
}
export default State;
```
## useCallback 
* 作用：避免组件重复渲染，提高性能，控制组件更新。
* useCallback 缓存的是一个函数，可以执行的。
```
import { useCallback, useState,} from 'react'
const State = ()=>{
   const [num,setNum] = useState(0)
   const [count,seCount] = useState(0)
   const countFun = ()=>{
       seCount(count + 1)
   }
   const numFun = ()=>{
       setNum(num + 1)
   }
   let mycallBack = useCallback(()=>{
       console.log(count,'count');
       return count
   },[num])
    return(
        <div>
            子组件--count:{count}--num:{num}--callback:{mycallBack()}
            <div>
                <button onClick={countFun}>
                    count
                </button>
            </div>
             <div>
                <button onClick={numFun}>
                    num
                </button>
            </div>
        </div>
    )
}
export default State;
```
## forwardRef
* 父组件拿到某个特定的子组件的dom元素。
```
import { forwardRef, useCallback, useRef, useState,} from 'react'
const State = ()=>{
    const ref = useRef(null);
   const numFun = ()=>{
      console.log(ref.current);
   }
    return(
        <div>
            子组件--count
            <Children ref = {ref} />
            <div>
                <button onClick={numFun}>
                    count
                </button>
            </div>
        </div>
    )
}
const Children = forwardRef((props,ref)=>{
    return(
        <div>
            <h1 ref={ref}>
                    555
            </h1>
        </div>
    )
})
export default State;
```
## useImperativeHandle
* 将子组件的属性和方法暴漏给父组件，一般```useRef```以及```forwardRef```配合使用。
* 父组件用```useRef```创建一个ref，并且将ref传给子组件，子组件使用```forwordRef```包括子组件，子组件接受第一个是props，第二个是ref。在forwordRef这个函数里面，使用useImperativeHandle。这个函数，有三个参数，第一个参数是父组件传过来的ref，第二个参数的一个回调函数，里面返回要暴漏给子组件的属性和方法。第三个参数是一个数组接受变量。默认为空，子组件传给父组件的值如果改变了，还是将更新前变量的值和函数传给父组件。如果存放一个变量，那么如果这个变量变化，才将变化后的值暴漏给i父组件。
```
import { forwardRef, useImperativeHandle, useRef, useState,} from 'react'
const State = ()=>{
    const ref = useRef(null);
   const numFun = ()=>{
      console.log(ref.current);
      ref.current.getValue();
   }
    return(
        <div>
            子组件--count
            <Children ref = {ref} />
            <div>
                <button onClick={numFun}>
                    count
                </button>
            </div>
        </div>
    )
}
const Children = forwardRef((props,ref)=>{
    const textRef = useRef();
    const [num,setNum] = useState(99) 
    const [count,setCount] = useState(55) 
    useImperativeHandle(ref,()=>({
        num,
        count,
        getValue:()=>{
            console.log(num,count);
            textRef.current.focus();
            
        }
    }),[num])
    const numFun = ()=>{
        setNum(num+1);
    }
    const countFun = ()=>{
        setCount(count+1);
    }
    return(
        <div>
            <h1 ref={ref}>
                    子组件--num{num} -- count{count}
            </h1>
            <input type="text" ref={textRef} />
            <button onClick={numFun}>num</button>
            <button onClick={countFun}>count</button>
        </div>
    )
})
export default State;
```
## useReducer
- 一般和useContext以及createContext搭配使用，可以实现redux的效果。
- useReducer有三个参数。第一个参数是reducer，第二个参数是一个初始化的state，第三个参数是initial。
- useReducer 返回的是一个数组。第一个参数是state，第二个参数是dispatch。
- 个人理解:使用useredux创建一个state和dispatch。并且在reducer函数里面根据action不同修改sate的值。然后使用useContext创建父级容器，将子组件包括进去，并且父级容器将satte和dispatch传递出去。在子组件里面使用useContext接收父级容器传递个子组件的state和dispath。如果子组件修改state在只需要dispath一个action即可。

- 使用useRedux
```
import React, { Component, useReducer } from 'react';
const Stete = ()=>{
    const [state,dispatch] = useReducer((state,action)=>{
        switch(action.type){
            case "changeName":
                console.log(action);
            return{
                ...state,
                name:action.name
            }
            default:
                return state
        }
    },{name:'高凯'})
    const btnChangeName = ()=>{
        dispatch({
            type:"changeName",
            name:"德莱文"
        })
    }
    return(
        <div>
            rrr--{state.name}
            <div>
                <button onClick={btnChangeName}>
                    按钮
                </button>
            </div>
        </div>
    )
}
export default Stete;
```
- 实现redux 第一步创建 reducer
```
import React, { Component, createContext, useReducer } from 'react';
export const reducerContext = createContext();
let reducer = (state,action)=>{
    switch(action.type){
        case "changeName":
            return{
                ...state,
                name:action.name
            }
        default:
            return state
    }
}
const data = {
    name:"张三峰"
}
const Reducer = (props)=>{
    let [state,dispatch] = useReducer(reducer,data)
    return(
        <>
            <reducerContext.Provider value={{state,dispatch}}>
                {props.children}
            </reducerContext.Provider>
        </>
    )
}
export default Reducer;
```
- 实现redux 第二步创建 父组件引入reducer
```
import Henan from './henan'
import Reducer from './reducer'
import Shanghai from './shanghai'
import State from './state'
const Home = ()=>{
    return(<div>
        {/* app
        <State /> */}
			<Reducer>
				<Henan />
				<Shanghai />
			</Reducer>
      </div>)
}
export default Home
```
- 实现redux 第三步创建 子组件引入sate和dispatch
```
import { useContext } from "react"
import { reducerContext } from "./reducer"
const Henan = ()=>{
    const {state,dispatch} = useContext(reducerContext)
    const btnHenan = ()=>{
        dispatch({
            type:"changeName",
            name:"欢迎来到了河南"
        })
    }
    return(
        <div>
            河南--{state.name}
            <button onClick={btnHenan}>
                河南按钮
            </button>
        </div>
    )
}
export default Henan
```



这篇文章主要对于常用的hooks的一些梳理，保活useeffect、usecontext、useref、useCallback、usememo等函数使用的总结。总体来说，现在hook写法比类组件更加简洁，逻辑抽离以及状态管理更加集中，方便了开发人员的使用。现在hooks ＋ typescript已然成为了无法阻挡得趋势。

react中hooks的使用

# 微前端实战(主应用: umi, 子应用: umi)

> 本文将详细描述如何创建一个微前端，如何部署上线。本文使用的主应用是umi，子应用是umi。
## 1、什么是微前端
 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。(-- 乾坤官网)

这是官网的原话。乾坤是一个库，他不涉及任何技术栈，在webpack项目(vue、react、angular) 和非webpack项目(jquery、原生js)等项目中都可以用到她。用它来将线上的多个项目联系起来，实现项目的连通性。

我们从为什么使用微前端、微前端是什么、如何使用微前端三个角度简单刨析微前端。
- 为什么使用微前端

   - 拆分巨型应用，使应用方便迭代更新
   - 兼容历史应用，实现增量开发
- 微前端是什么
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
- 如何使用、选择微前端
国内使用基座模式偏多
Single-Spa：最早的微前端框架，兼容多种前端技术栈。
Qiankun：基于Single-Spa，阿里系开源微前端框架。

## 2、微前端的优点和缺点
- 优点
通过路由进行跨应用程序通信
解决了大型项目如何迭代的问题
解决了多团队技术栈不同的问题，实现react和Vue等框架整合
- 缺点
有效载荷大小
环境差异配置难
业务和治理复杂

## 3、微前端项目展示
- 项目的关系图如下所示，以主应用umi为基座，子应用的umi以路由关联的形式加载。

<img style="width:100%" src="http://res.gaokai.fun/0001.svg" />

- 效果图演示
我们想要做的一个效果就是，在主应用里面，每个路由切换的时候，都会获取到微前端的全局的state数据，页面里面有一个按钮，每次点击都会将改值更新到全局state数据。当该值为0 的时候，跳转到登录页面。

<img style="width:100%" src="http://res.gaokai.fun/0001.gif" />

## 4、创建umi主应用

- 安装umi

```
 npx @umijs/create-umi-app
```

- 安装微前端qiankun插件

```
npm install @umijs/plugin-qiankun
```

在umirc.tsl里面开启微前端

umirc.ts
```
import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      path: '/root',
      name: 'umi',
      component: '@/layouts/index',
      routes: [
        {
          path: '/root/dashboard',
          name: '总览',
          component: '@/pages/index/index',
        },
        {
          path: '/root/about',
          name: '关于我们',
          component: '@/pages/about/index',
        },
        {
          path: '/root/list',
          name: '列表',
          component: '@/pages/list/index',
        },
        {
          path: '/.', redirect: '/root/dashboard',
        },
        {
          path: '*', component: '@/pages/404/index'
        }
      ]
    },
    {
      path: '/login',
      name: '登录',
      layout: false,
      hideInMenu: true,
      component: '@/pages/login/index',
    },
    {
      name: 'umi 微应用',
      path: '/umi-app',
      microApp: 'umi_app',
    }
  ],
  fastRefresh: {},
  layout: {
    title: '微前端-乾坤',
    headerRender: false
  },
  //核心代码
  qiankun: {
    master: {
      apps: [
        {
          name: 'umi_app', // 唯一 id
          // entry: 'http://localhost:10000', // html entry
          entry: '//www.umiapp.com', // html entry
        },
      ],
    }
  }
});
```


在src文件夹下面创建一个action.ts文件

actions.ts
```
import { initGlobalState, MicroAppStateActions } from 'qiankun';

const state = {
    id: -1
};

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev,'&');
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

export default actions
```

- 主应用里面访问全局的state状态

```
...
import actions from '../acton';
...
const Index = ()=>{
   actions.onGlobalStateChange((state, prevState) => {
        console.log('state', state, prevState);
       //TODO
    }, true);
}

export default Index
```

- 子应用修改全局状态

```
actions.setGlobalState({xxx: xxx})
```

## 5、创建umi子应用

- 安装umi

```
 npx @umijs/create-umi-app
```

- 安装微前端qiankun插件

```
npm install @umijs/plugin-qiankun
```

umirc.ts 配置

umirc.ts
```
import { defineConfig } from 'umi';
const packageName = require('./package.json').name;
const Config = require('webpack-chain')
export default defineConfig({
  publicPath: "/",
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      path: '/',
      name: '主页',
      component: '@/layouts/index',
      routes: [
        {
          path: '/index',
          name: '总览',
          component: '@/pages/index/index'
        },
        {
          path: '/list',
          name: '列表',
          component: '@/pages/list/index'
        },
        {
          path: '/form',
          name: '表单',
          component: '@/pages/form/index'
        },
        {
          path: '/detail',
          name: '详情',
          component: '@/pages/detail/index'
        },
        {
          path: '/', redirect: '/index',
        }
      ]
    }
  ],
//打包配置
  chainWebpack:(config, { webpack, env, createCSSRule }) =>{
    config
          .output
                .library(`${packageName}-[name]`)
                .libraryTarget('umd')
                .jsonpFunction(`webpackJsonp_${packageName}`)
                .globalObject('window')
                .end()
          .devServer
                    .headers({'Access-Control-Allow-Origin': '*'})
                    .hot(false)
                    .historyApiFallback(true)
                    .watchContentBase(false)
                    .end();
    return config;
  },
 
  fastRefresh: {},
  qiankun: {
    slave: {}
  },
  hash: true,  //开启打包文件的hash值后缀,
});
```

src目录下面创建app.ts 和 actions.ts

app.ts

```
import actions from './actions'
export const qiankun = {
    // 应用加载之前
    async bootstrap(props) {
    },
    // 应用 render 之前触发
    async mount(props) {
        actions.setActions(props)
    },
    // 应用卸载之后触发
    async unmount(props) {
        //   console.log('app1 unmount', props);
    },
};
```

actions.ts
```
// micro-app-vue/src/shared/actions.js
function emptyAction() {
    // 警告：提示当前使用的是空 Action
    console.warn("Current execute action is empty!");
}

class Actions {
    // 默认值为空 Action
    actions = {
        onGlobalStateChange: emptyAction,
        setGlobalState: emptyAction
    };

    /**
     * 设置 actions
     */
    setActions(actions) {
        this.actions = actions;
    }

    /**
     * 映射
     */
    onGlobalStateChange(...args) {
        return this.actions.onGlobalStateChange(...args);
    }

    /**
     * 映射
     */
    setGlobalState(...args) {
        return this.actions.setGlobalState(...args);
    }
}

const actions = new Actions();
export default actions;
```

- 子应用里面访问全局的state状态

```

...
import actions from '../acton';
...

const Index = ()=>{
   actions.onGlobalStateChange((state, prevState) => {
        console.log('state', state, prevState);
       //TODO
    }, true);
}

export default Index
```

- 子应用修改全局状态

```
actions.setGlobalState({xxx: xxx})
```

## 其他问题
- nginx上面，子应用要开启跨域访问，否则主应用fetch不到子应用的资源

<a href="https://qiankun.umijs.org/zh/faq">其他的打包问题</a>



微前端实战基于umi

# react Hooks 之useEvent

 场景: 对于一个函数，我们处于性能优化的考虑，我们希望函数可以缓存，依赖项不变的话，会返回上一次创建的函数。神说要有光，于是 ``` usecallBack来了```
但是useCallback的第二项是空数组的时候，我们在函数内拿不到最新的state值。于是我们把state作为依赖项传给了usecallback的第二个参数。
但是这是我们想要的吗？
usecallback的第二个参数，依赖一旦发生变化，那么callback的缓存函数会重新创建，那么usecallBack也就失去了缓存的意义。
我们希望有一个hooks，她能缓存函数，并且可以在函数内获取最新的state和props的值。于是``` useEvent```出现了。


```
import React, { useCallback, useLayoutEffect, useRef } from "react";

const useEvent = (handler)=>{
    const handlerRef = useRef(null);

    useLayoutEffect(()=>{
        handlerRef.current = handler
    })

    return useCallback((...args)=>{
        return  handlerRef?.current(...args)
    },[])
}

export default useEvent
```



本文描述了自定义hooks，useEvent的背景需求，以及代码示例