Forem: inno

参照Promise/A+规范自定义实现Promise

inno — Thu, 18 May 2023 09:48:50 +0000

Promise/A+规范

https://promisesaplus.com/

Terminology

“promise” is an object or function with a then method whose behavior conforms to this specification.
“thenable” is an object or function that defines a then method.
value 是promise状态成功时的值，包括 undefined/thenable或者是 promise
exception 是一个使用throw抛出的异常值
reason 是promise状态失败时的值

Requirements

Promise 必须处于以下三个状态之一: pending, fulfilled 或者是 rejected

1.如果promise在pending状态
---可以变成 fulfilled 或者是 rejected

2.如果promise在fulfilled状态
---不会变成其它状态
---必须有一个value值

3.如果promise在rejected状态
---不会变成其它状态
---必须有一个promise被reject的reason

The then Method

promise必须提供一个then方法，来访问最终的结果
promise的then方法接收两个参数
promise.then(onFulfilled, onRejected)

1.onFulfilled 和 onRejected 都是可选参数

 onFulfilled 必须是函数类型

 onRejected 必须是函数类型

2.如果 onFulfilled 是函数

1.必须在promise变成 fulfilled 时，调用 onFulfilled，参数是promise的value
2.在promise的状态不是 fulfilled 之前，不能调用
3.onFulfilled 只能被调用一次

3.如果 onRejected 是函数:

1.必须在promise变成 rejected 时，调用 onRejected，参数是promise的reason
2.在promise的状态不是 rejected 之前，不能调用
3.onRejected 只能被调用一次

4.onFulfilled 和 onRejected 必须作为函数被调用
5.then方法可能被多次调用

1.如果promise变成了 fulfilled态，所有的onFulfilled回调都需要
  按照then的顺序执行
2.如果promise变成了 rejected态，所有的onRejected回调都需要
  按照then的顺序执行

7.then必须返回一个promise

promise2 = promise1.then(onFulfilled, onRejected);
1.onFulfilled 或 onRejected 执行的结果为x,调用 resolvePromise
2.如果 onFulfilled 或者 onRejected 执行时抛出异常e,promise2需要被reject
3.如果 onFulfilled 不是一个函数，promise2 以promise1的值fulfilled
4.如果 onRejected 不是一个函数，promise2 以promise1的reason rejected

自定义Promise

//难点分析
// 1.promise中有异步函数，then方法执行时，promiseStatus仍然是pedding状态，如何在promiseStatus改变时调用then的方法
// 2.then返回一个promise对象，当promise中有异步调用时，如何调用
// 3.catch异常穿透问题
enum Status {
    Pedding = "Pedding",
    Fulfilled = "Fulfilled",
    Rejected = "Rejected"
}
interface callBackType{
    onResolve:(param:any)=>any
    onReject?:(param:any)=>any
}
class CustomPromise {
   private  promiseStatus: Status = Status.Pedding
   private  promiseResult: unknown
   private  callBacks:callBackType[]=[]
    constructor(executor) {
        const resolve = (data: any) => {
            if (this.promiseStatus !== Status.Pedding) {
                return
            }
            this.promiseStatus = Status.Fulfilled
            this.promiseResult = data
            if (this.callBacks.length!=0) {
             setTimeout(()=>{
                this.callBacks.forEach(item=>item.onResolve(this.promiseResult)) 
             },0)   
            }
        }
        const reject = (error: any) => {
            this.promiseStatus = Status.Rejected
            this.promiseResult = error
            if (this.callBacks.length!=0) {
                setTimeout(()=>{
                    this.callBacks.forEach(item=>{
                        if (item.onReject) {
                            item.onReject(this.promiseResult) 
                        }

                    }) 
                 },0)  

            }
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    then(onResolve, onReject?:(params:any)=>any) {
        return new CustomPromise((resolve,reject)=>{
 // 发现onReject回调函数没有传递就自定义一个。
//并且将前一个then方法执行返回的失败的Promise一直向下抛，
//直到遇见可以处理失败状态的catch函数
            if (typeof onReject!='function') {
                onReject=function (params) {
                    throw params
                }   
            }
// onResolve也是一样将结果一直向下传递，直到遇到处理的回调函数
            if (typeof onResolve !== 'function') {
                onResolve = value => value
            }
            if (this.promiseStatus === Status.Fulfilled) {
                try {
                    const value= onResolve(this.promiseResult)  
                    resolve(value)
                } catch (error) {
                    reject(error)
                }              
            }
            if (this.promiseStatus === Status.Rejected) {
                try {
                    const value= onReject(this.promiseResult)
                    resolve(value)
                } catch (error) {
                    reject(error)
                }    
            }
            if (this.promiseStatus === Status.Pedding) {
              this.callBacks.push({onResolve(param){
                try {
                  const value=onResolve(param)
                  resolve(value)
                } catch (error) {
                  reject(error)  
                }
              },onReject(param){
                try {
                    if (onReject) {
                        const value=onReject(param)
                        resolve(value)  
                    }

                  } catch (error) {
                    reject(error)  
                  }
              }})
            }
        })
    }
    catch(onReject:(param:any)=>void){
        this.then(undefined,onReject)
    }
    static all(promises){
        return new CustomPromise((resolve, reject) => {
            let count = 0
            let res:any[]= []
            for(let i = 0 ; i < promises.length; i ++){
                promises[i].then(value => {
                    count ++ 
                    res[i] = value 
                    if (count === promises.length) {
                        resolve(res)
                    }
                },reason => {
                    reject(reason)
                })
            }
            });
    }
    static race(promises){
        return new CustomPromise((resolve, reject) => {
            promises.forEach(promise => {
                promise.then(value => {
                    resolve(value)
                },reason => {
                    reject(reason)
                })
            })
        });
    }
}

react+react-router前端路由的rbac实现方案

inno — Tue, 16 May 2023 09:38:24 +0000

当前项目的角色

enum Role {
  owner = 1,
  member,
  admin,
  account,
}

预计实现效果，通过可配置项对前端路由自动过滤。

export const permission: Record<Role, PayoutPermission> = {
  [Role.owner]: {
    entry: true,
  },
  [Role.admin]: {
    entry: false,
  },
  [Role.member]: {
    entry: false,
  },
  [Role.account]: {
    entry: true,
  },
}

实现步骤

在需要增加rbac的Route中增加对应字段

const DashboardRouteConfig: RouteProps = {
  path: '/dashboard',
  wrapper: PrivateAuthWrapper,
  component: PrivateLayout,
  children: [
    {
      path: '',
      exact: true,
      component: UsersHome,
      rbac: 'user.entry',
      navItem: {
        label: 'Home',
        icon: 'Home',
        index: 1,
      },
    },
 ]
}

在src下创建rbac文件夹，为需要rbac的route增加对应的permission

export const permission: Record<Role, PayoutPermission> = {
  [Role.owner]: {
    entry: true,
  },
  [Role.admin]: {
    entry: false,
  },
  [Role.member]: {
    entry: false,
  },
  [Role.account]: {
    entry: true,
  },
}

rbac暴露统一的getPermissions（role）方法，getPermissions根据角色返回对应route的permission

export const getPermissions = (role: Role) => {
  const debitCard = debitCardPermission[role]
  const boosterCard = boosterCardPermission[role]
  const standardCard = standardCardPermission[role]
  const transaction = transactionPermission[role]
  const team = teamPermission[role]
  const setting = settingPermission[role]
  const wallet = WalletPermission[role]
  const payout = PayoutPermission[role]
  const invoice = InvoicePermission[role]
  const user = UserPermission[role]
  const tally = TallyPermission[role]
  const rewards = RewardsPermission[role]
  const payroll = PayrollPermission[role]
  const ledgerRole = LedegerRolePermission[role]

  return {
    debitCard,
    boosterCard,
    standardCard,
    transaction,
    team,
    setting,
    rewards,
    wallet,
    payout,
    invoice,
    user,
    tally,
    payroll,
    ledgerRole,
  }
}

export type Rbac = ReturnType<typeof getPermissions>

对当前route tree进行递归遍历，把如果route中无rbac字段直接返回，有rbac字段，进行权限校验

const routeFilter = (
  route: RouteProps,
  testPermission: ReturnType<typeof permissionsVerify>,
  rootState?: Partial<RootState>
) => {
  if (route.devRoute && process.env.NODE_ENV !== 'development') {
    return null
  }
  if (route.filter && rootState && !route.filter(rootState)) {
    return null
  }
  if (route.rbac && !testPermission(route.rbac)) {
    return null
  }
  if (route.children) {
    const filteredChildren = []
    for (const childRoute of route.children) {
      const validRoute = routeFilter(childRoute, testPermission, rootState)
      if (validRoute) {
        filteredChildren.push(validRoute)
      }
    }
    if (filteredChildren.length === 0) {
      return null
    }
    route = {
      ...route,
      children: filteredChildren,
    }
  }
  return route
}

testPermission根据rbac进行权限校验

export const permissionsVerify =
  (role: Role, isAccountant?: boolean) => (rules: string | string[]) => {
    if (isAccountant && role === 3) {
      role = 4
    }
    const rolePermissionTree = getPermissions(role)
    rules = Array.isArray(rules) ? rules : [rules]
    return rules.every((rule) => !!getPath(rolePermissionTree, rule))
  }
export function getPath(obj: any, path: string) {
  const normalizedPath = normalizeKeypath(path)
  if (normalizedPath.indexOf('.') < 0) {
    return obj[path]
  }
  const pathList = normalizedPath.split('.')

  let d = -1
  const l = pathList.length

  while (++d < l && obj != null) {
    obj = obj[pathList[d]]
  }
  return obj
}

当我们拿到过滤完成后的路由时，就可以对router进行render

function RoutesRender({ routes }: { routes: RouteProps[] }) {
  const { path } = useRouteMatch()
  return (
    <Switch>
      {routes.map(
        (
          {
            path: relativePath,
            children,
            component: RenderComponent,
            wrapper: Wrapper,
            ...routeProps
          },
          index
        ) => {
          const basePath = urlJoin(path)
          const pathname = basePath(relativePath || '')
          const withWrapperRender = withWrapperComponent(Wrapper)

          if (!children) {
            // avoid members to go to the default route '/dashboard' which is a blank page in this routes
            return (
              <Route
                {...routeProps}
                path={pathname}
                key={(relativePath || '') + index}
                render={() => withWrapperRender(<RenderComponent />)}
              />
            )
          }
          return (
            <Route path={pathname} exact={routeProps.exact} key={relativePath}>
              {withWrapperRender(
                <RenderComponent>
                  <RoutesRender routes={children} />
                </RenderComponent>
              )}
            </Route>
          )
        }
      )}
    </Switch>
  )
}

使用webpack5中的thread-loader和内置的Cache机制提高编译速度

inno — Thu, 09 Mar 2023 08:45:54 +0000

开发模式状态下，影响编译速度的因素

查看webpack打包后各个模块的大小

npm install --save-dev webpack-bundle-analyzer ```javascript

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const webpack = require('webpack')
module.exports = {
webpack: {
plugins: [
new BundleAnalyzerPlugin(),
],
}
};



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag05q7kexn5szywogfof.png)

####当前webpack编译速度
npm install simple-progress-webpack-plugin --save -dev
```javascript


const webpack = require('webpack')
const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
module.exports = {
    webpack: {
        plugins: [
            new SimpleProgressWebpackPlugin()
              ]
};

影响编译速度的因素

node是单线程，项目中的每个module只能依次打包
对同一模块被多次引用重复打包

使用webpack5的Cache对项目进行缓存

使用webpack5的thread-loader进行多线程打包



const path = require('path')
const CracoLessPlugin = require('craco-less')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
const AntDesignTheme = require('./src/styles/antd/antd-theme.json')
const CracoEsbuildPlugin = require('craco-esbuild')
const { ProvidePlugin } = require('webpack')
const WebpackBarPlugin = require('webpackbar')
module.exports = {
  style: {
    css: {
      loaderOptions: {
        modules: {
          compileType: 'module',
          mode: 'local', 
          auto: true,
          exportGlobals: true,
          localIdentName: '[path][name]__[local]--[hash:base64:5]',
          localIdentContext: path.resolve(__dirname, 'src'),
          exportLocalsConvention: 'camelCase',
          exportOnlyLocals: false,
        },
      },
    },
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
  babel: {
    plugins: [
      [
        'transform-imports',
        {
          transform: 'lodash/${member}',
          preventFullImport: true,
        },
      ],
    ],
  },
  webpack: {
    plugins: [
      new AntdDayjsWebpackPlugin(),
      new ProvidePlugin({
        React: 'react',
      }),
      new WebpackBarPlugin(),
    ],
    cache: {
      type: 'filesystem',
      allowCollectingMemory: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          {
            loader: 'thread-loader',
            options: {
                workers: 8
            }
        },
        {
            loader: 'babel-loader'
        }
          // your expensive loader (e.g babel-loader)
        ],
      },
    ],
  },
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // antd them custom
            modifyVars: AntDesignTheme,
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoEsbuildPlugin,
    },
  ],
}

封装一个工具函数对list实现滚到加载

inno — Tue, 07 Mar 2023 07:23:25 +0000

滚动加载需要实现的功能

当调用loadMore函数时，pageNum加1
调用query时，如果没有传入pageNum则默认重新加载，已查询到的数据清空，重新查询

模拟后端接口

后端的接口数据格式

public class ResultType {
    private Boolean Success;
    private Integer Code;
    private String Message;
    private PaginationResult paginationResult;
}
public class PaginationResult {
    private Integer total;
    private List<HashMap<String,? extends Object>> items;
    private Boolean next;
}

模拟后端返回数据

@RestController
@RequestMapping("/inno")
@CrossOrigin
public class CommonController {
    Integer total=1;
    @GetMapping("list")
    public R findAll(){
        ArrayList<String> arrayList = new ArrayList<>();
       total= total+1;
        arrayList.add("inno:"+total);
        HashMap<String,Object> map = new HashMap<>();
        map.put("items",arrayList);
        map.put("total",total);
        map.put("next",true);
        if (Objects.equals(total,8)){
            map.put("next",false);
        }
        return R.ok().Data(map) ;
    }
}

前端封装对应的axios请求

import axios, { AxiosRequestConfig } from "axios";
import { ResultType } from "./requestType";

const baseURL = "http://localhost:8080/"
const instance = axios.create({
  baseURL: baseURL,
  timeout: 1000,

});
// Add a request interceptor
instance.interceptors.request.use(function (config) {
  // Do something before request is sent

  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

// Add a response interceptor
instance.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  return response ;
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error);
});

const axiosGet =<T>({ url, params, headers={} }: AxiosRequestConfig):Promise<ResultType<T>> => {
  headers["Content-Type"] = 'application/json;charset=utf-8'
  return new Promise(async (resolve, reject) => {
    try {
      const result =await instance({
        url,
        method: "get",
        params: params,
        headers
      })
      const resultData=result.data as ResultType<T>
      resolve(resultData)


    } catch (error) {

      reject(error)
    }
  })
}

export {axiosGet}

前端对应的数据类型

export type ResultType<T>={
    code:number,
    success:boolean,
    message:string,
    data:T
}
export type PaginationType<T>={
    total:number,
    items:T[]
    next:boolean
}

Asl滚动加载list组件

import { useRequest } from 'ahooks'
import { message } from 'antd'
import { AxiosHeaders } from 'axios'
import { set } from 'immer/dist/internal'
import {useCallback, useEffect, useState} from 'react'
import { axiosGet } from '../../api'
import { PaginationType } from '../../api/requestType'
type Props={
  url:string  
}
type queryParamType={
    pageSize:number
    pageNum:number
    [key:string]:any
}
const useAml=<T>(url:string)=>{
    const [lists, setLists] = useState<T[]>([])
    const [queryParam, setQueryParam] = useState<queryParamType>({pageSize:10,pageNum:1})
    const [next, setNext] = useState<boolean>(true)
    const [total, setTotal] = useState<number>(0)
    const fetchData=useCallback(async ()=>{    
        try {
         const result=  await axiosGet<PaginationType<T>>({url,params:queryParam})
         return result
        } catch (error) {
           throw  error
        } 
    },[]) 
    const {loading  } = useRequest(fetchData,{
        manual: false,
        onSuccess: (result, params) => {
            const {total,items,next}=result.data
            setLists(lists=>([...lists,...items]))
            setTotal(total)
            setNext(next)
          },
          onError: (error) => {
            message.error(error.message);
          },
          refreshDeps: [url,queryParam],
          debounceWait: 1000,
    })
    const initialList=()=>{
       setLists([]);
       setNext(true);
       setTotal(0); 
    }
    const query=(params:{
        pageSize?:number
        pageNum?:number
        [key:string]:any
    })=>{
        if (!params.pageNum) {
        initialList() 
        }
        setQueryParam(queryParam=>({...queryParam,...{pageSize:10,pageNum:1},...params}))
    }

    const loadMore=()=>{
        if (next) {
            setQueryParam(queryParam=>({...queryParam,pageNum:queryParam.pageNum+1})) 
        }
    }
    const resetQuery=()=>{
        setQueryParam({pageSize:10,pageNum:1})
    }
    return {lists,next,total,loading,query,loadMore}
}
export default useAml

实现效果

virtual-scroll-list

inno — Wed, 01 Mar 2023 10:30:00 +0000

virtual-scroll-list

实例功能

虚拟化列表的Hook,可以解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题
滚动加载数据

使用
url
请求数据的URL
itemSize
item的高度
itemRender
渲染列表项
loadingItem
数据加载时的状态
onDataUpdate
当list中的数据更新时执行，这个函数的形参是当前list已经加载到的数据
defaultQuery

默认的查询参数没有设置时默认{page: 1,pageSize: 10}
silent
false：显示errorMessage true：不显示
dataFilter
对List中的数据进行过滤操作
-event$
通过const { event$, actions } = VirtualScrollList.useVirtualListEvent()获取把event$传给VirtualScrollList，组件会订阅actions中的操作你可以通过action中的方法进行查询、加载、重置操作
autoHeight
设置VirtualScrollList的高度，没有给值时会获取VirtualScrollList所在container的高度
emptyElement
VirtualScrollList没有数据时展示
queryFormatOptions
AxiosRequestConfig

useCallback useMomo能够达到性能优化效果源码解析（version 18.0）

inno — Tue, 21 Feb 2023 09:52:52 +0000

question

为什么使用useCallback 和useMemo返回的memoized值可以起到性能优化的作用。

源码分析

我们在packages\react\src\ReactHooks.js可以找到对应的hook

export function useCallback<T>(
  callback: T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useCallback(callback, deps);
}

export function useMemo<T>(
  create: () => T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useMemo(create, deps);
}

在这里我们可以看到其useCallback，useMemo是调用dispatcher对应的方法, 而dispatcher是由resolveDispatcher()生成。而resolveDispatcher()中的dispatcher 是由ReactCurrentDispatcher.current生成。因此我们需要查看ReactCurrentDispatcher.current的数据是在哪里挂载的。

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  if (__DEV__) {
    if (dispatcher === null) {
      console.error(
        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
          ' one of the following reasons:\n' +
          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
          '2. You might be breaking the Rules of Hooks\n' +
          '3. You might have more than one copy of React in the same app\n' +
          'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
      );
    }
  }
//如果在渲染阶段之外访问，将导致空访问错误。我们
  //故意不抛出我们自己的错误，因为这是在热路径中。
  //也有助于确保这是内联的。
  return ((dispatcher: any): Dispatcher);
}

在packages\react-reconciler\src\ReactFiberHooks.js中的renderWithHooks对ReactCurrentDispatcher.current进行数据挂载这里只截取对应代码

export function renderWithHooks<Props, SecondArg>(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: (p: Props, arg: SecondArg) => any,
  props: Props,
  secondArg: SecondArg,
  nextRenderLanes: Lanes,
): any {
  renderLanes = nextRenderLanes;
  currentlyRenderingFiber = workInProgress;


  //TODO 如果挂载期间根本没有使用挂钩，则发出警告，然后在更新期间使用一些挂钩。
  //目前我们将更新渲染识别为一个装载，因为 memoizedState === null。
//这很棘手，因为它对某些类型的组件有效（例如 React.lazy）

  //使用 memoizedState 来区分挂载/更新只有在至少使用一个有状态钩子的情况下才有效。
  //非状态挂钩（例如上下文）不会添加到 memoizedState，
  //所以 memoizedState 在更新和挂载期间将为 null。

    ReactCurrentDispatcher.current =
      current === null || current.memoizedState === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;
  }
}

因此当dispatcher.useCallback和dispatcher.useMemo实际调用的是会根据是否是初次渲染调用对应的HooksDispatcherOnMount和HooksDispatcherOnUpdate

const HooksDispatcherOnMount: Dispatcher = {
  readContext,
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useInsertionEffect: mountInsertionEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  useDebugValue: mountDebugValue,
  useDeferredValue: mountDeferredValue,
  useTransition: mountTransition,
  useMutableSource: mountMutableSource,
  useSyncExternalStore: mountSyncExternalStore,
  useId: mountId,
};
const HooksDispatcherOnUpdate: Dispatcher = {
  readContext,

  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useInsertionEffect: updateInsertionEffect,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  useDebugValue: updateDebugValue,
  useDeferredValue: updateDeferredValue,
  useTransition: updateTransition,
  useMutableSource: updateMutableSource,
  useSyncExternalStore: updateSyncExternalStore,
  useId: updateId,
};

HooksDispatcherOnMount和HooksDispatcherOnUpdate调用对应的方法,这里可以看到useCallback和useMemo会都会被hook.memoizedState缓存，区别就一个缓存的是函数，一个缓存的是值。对 hook.memoizedState查看我们可以了解到mountWorkInProgressHook和updateWorkInProgressHook生成，


function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

function mountMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    nextCreate();
  }
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

function updateMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    // Assume these are defined. If they're not, areHookInputsEqual will warn.
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    nextCreate();
  }
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

mountWorkInProgressHook workInProgressHook = workInProgressHook.next = hook 根据这段代码我们可以了解到一个函数组件的所有hook函数会形成一个hooks链表，而workInProgressHook 指针会指向最后一个节点。这个hooks链表是存放在currentlyRenderingFiber.memoizedState


function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,

    baseState: null,
    baseQueue: null,
    queue: null,

    next: null,
  };

  if (workInProgressHook === null) {
   //这是列表中的第一个钩子
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
   //追加到列表的末尾
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

updateWorkInProgressHook workInProgress 树中的 fiber 节点的下一个 hook 存在，链表直接指向节点，否则就从对应的 current 的 fiber 节点克隆过来，然后把这些 hook 构建出新的链表放到 currentlyRenderingFiber.memoizedState 上，方便下次更新时使用；

function updateWorkInProgressHook(): Hook {
//此函数用于更新和由 a 触发的重新渲染
  //渲染阶段更新。它假设有一个当前的钩子我们可以
  //克隆，或者我们可以从之前的渲染过程中进行的工作钩子
  //用作基础。当我们到达基本列表的末尾时，我们必须切换到
  //用于挂载的调度程序。
  let nextCurrentHook: null | Hook;
  if (currentHook === null) {
    const current = currentlyRenderingFiber.alternate;
    if (current !== null) {
      nextCurrentHook = current.memoizedState;
    } else {
      nextCurrentHook = null;
    }
  } else {
    nextCurrentHook = currentHook.next;
  }

  let nextWorkInProgressHook: null | Hook;
  if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState;
  } else {
    nextWorkInProgressHook = workInProgressHook.next;
  }

  if (nextWorkInProgressHook !== null) {
   //已经有一个正在进行的工作。重复使用它。
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;

    currentHook = nextCurrentHook;
  } else {
    //从当前钩子克隆。

    if (nextCurrentHook === null) {
      const currentFiber = currentlyRenderingFiber.alternate;
      if (currentFiber === null) {
        //这是初始渲染。当组件到达此分支
        //挂起，恢复，然后呈现一个额外的钩子。
        const newHook: Hook = {
          memoizedState: null,

          baseState: null,
          baseQueue: null,
          queue: null,

          next: null,
        };
        nextCurrentHook = newHook;
      } else {
        // This is an update. We should always have a current hook.
        throw new Error('Rendered more hooks than during the previous render.');
      }
    }

    currentHook = nextCurrentHook;

    const newHook: Hook = {
      memoizedState: currentHook.memoizedState,

      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,

      next: null,
    };

    if (workInProgressHook === null) {
     //这是列表中的第一个钩子。
    // 若这是链表的第一个hook节点，则使用 currentlyRenderingFiber.memoizedState 指针指向到该hook
    // currentlyRenderingFiber 是在 renderWithHooks() 中赋值的，是当前函数组件对应的fiber节点
      currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
    } else {
   //附加到列表的末尾。
      workInProgressHook = workInProgressHook.next = newHook;
    }
  }
  return workInProgressHook;
}

总结

之所以useCallback和useMemo可以达到性能优化的效果，是因为我们在初始节点已经把所有的 hooks 都挂载在链表中了，在更新阶段，所有的 hooks 都会进入到 update 阶段，比如 useState()内部会执行 updateState()，useEffect()内部会执行 updateEffect()等。二这些 hooks 的 update 阶段执行的函数里，都会执行函数 updateWorkInProgressHook()。

updateWorkInProgressHook()函数的作用，就是从 hooks 的链表中获取到当前位置，上次渲染后和本次将要渲染的两个 hook 节点：

currentHook: current 树中的那个 hook；即当前正在使用的那个 hook；

workInProgressHook: workInProgress 树中的那个 hook，即将要执行的 hook；
当通过对比两个hook，当依赖项没有发生改变时，workInProgressHook链表的指针会直接指向之前的fiber节点的地址。而不会重新创建。因此达到性能优化的效果

react中useStateCallback的封装

inno — Mon, 20 Feb 2023 09:50:42 +0000

target:当state更新后，调用回调函数

useEffect会在state的数据变化后
useRef存储、调用回调函数

Package

import { useEffect, useRef, useState } from "react"

export const useStateCallback=<T>(initialState: T | (() => T))=>{
  const [state, setState] = useState<T>(initialState)
 const ref= useRef<any>()
  const setStateCallback=(value: T | ((prevState: T) => T),callback:Function)=>{  
    ref.current=callback
     setState(value)
  }
  useEffect(() => {
    ref.current&&ref.current(state)
  }, [state])
  return {state,setStateCallback}
}

Call

import { Button } from 'antd'
import { useStateCallback } from './hooks'

 const App = () => {
 const {state,setStateCallback}= useStateCallback<number>(1)
  const click=()=>{
    setStateCallback(state=>state+1,(stateUpdated:number)=>{
      console.log("after updating data",stateUpdated);
    })
  }
  return (
    <div>  
     count:{state}
     <Button onClick={click}></Button>
   </div>
  )
}
export default App

Outcome

React项目中对iconFont的封装

inno — Thu, 16 Feb 2023 10:15:00 +0000

在React项目中引入iconFont

引入

2.使用

 <svg className={Style.icon} aria-hidden="true">
    <use xlinkHref={`#icon-Company`}></use>
 </svg>

style 
.icon {
  width: 1em; 
  height: 1em;
  vertical-align: -0.15em;//垂直外边距
  fill: currentColor;//填充颜色
  overflow: hidden;//超出部分隐藏
}

3.效果

封装

基本参数

（样式的权重由高到低）

iconName icon的name
fontSize icon的大小
color icon的样式
style icon的style样式
className icon的类

 import { CSSProperties } from 'react'
import { iconNameType } from '../../static/iconfont/iconNameType'
import Style from './index.module.scss'
 interface Props{
    fontSize?:number,
    className?:string,
    style?:CSSProperties,
    iconName:iconNameType
    color?:string
 }
   const Icon = (props:Props) => {
    const {fontSize,className,style,iconName,color}=props
    const wrapperStyle={...style,fontSize:fontSize+'px',color}
    return (
        <div className={className} style={wrapperStyle}>
          <svg className={Style.icon} aria-hidden="true">
            <use xlinkHref={`#icon-${iconName}`}></use>
          </svg>
        </div>
    )
}
export default Icon

使用

    <Icon
    iconName='Company'
    color='#008000c1'
    fontSize={40}
    ></Icon>

效果

设置iconName的数据类型

这里的iconName的值必须使用iconfont.js中的id。因此需要读取到iconfont.js所有的id，并拼接成字符串字面量类型

预计效果

实现思路使用node.js的fs 读取文件，并写入到到当前文件夹generateIconType.js

const fs =require('fs')
const fileName='./iconfont.js'
const iconNameTypePath ="./iconNameType.ts"
const readFile=(filePathName)=>{
    fs.readFile(filePathName,'utf-8',(error,data)=>{
        if (error) {
            throw error
        }
    //获取所有id="icon-Company"格式的正则
     const reg=/id="[a-zA-Z-]*"/g
    //id="icon-Company需要被替换正则
      const searchValueReg=/(id="icon-)|"/g 
    //   map(item=>item.replaceAll(searchValueReg,""))
    const idMatchArrs=  data.match(reg)
   const idArrs= idMatchArrs.map(item=>{
   const replactItem= item.replaceAll(searchValueReg,"")
   return `"${replactItem}"`
})
   const iconNameType=idArrs.join("|")
   console.log('====================================');
   console.log(iconNameType);
   console.log('====================================');
   fs.writeFile(iconNameTypePath,
    `export type iconNameType=${iconNameType}`,
    'utf8',(err)=>{
        if (err) {
            console.log('====================================');
            console.log("write",err);
            console.log('====================================');
        }

   })
    })
}
function generateIconType(){
    readFile(fileName)
}
generateIconType()

结果

封装一个hook对table的查询进行处理

inno — Wed, 08 Feb 2023 09:25:13 +0000

table查询条件分析

page：查询第几页
pageSize:每页查询的条数
其他查询条件

import { TableSchema } from '@/types/api';
import { useRequest } from 'ahooks';
import { useState } from 'react';
import request from '@/packages/request';
import { message } from 'antd';

interface queryParam {
  page: number;

  [key: string]: unknown;
}

export const useTableData = <T>(url: string) => {
  const [dataSource, setDataSource] = useState<T[]>();
  const [total, setTotal] = useState<number>();
  const [isNext, setIsNext] = useState<Boolean>(false);
  const [param, setParam] = useState<queryParam>({ page: 1 });
  const getAsyncDataSource = async () => {
    try {
      const data = await request<TableSchema<T>>(url, {
        method: 'GET',
        params: { ...param, pageSize: 10 },
      });
      return data;
    } catch (error) {
      throw error;
    }
  };
  const { loading } = useRequest(getAsyncDataSource, {
    manual: false,
    onSuccess: ({ data }) => {
      setDataSource(data.results);
      setTotal(data.count);
      setIsNext(new Boolean(data.next));
    },
    onError: (e: Error) => {
      message.error(e.message);
    },
    refreshDeps: [param],
    loadingDelay: 300,
  });
  const queryByParam = (param: queryParam) => {
    setParam(param);
  };
  return {
    loading,
    isNext,
    total,
    dataSource,
    queryByParam,
  };
};

使用


const Notification = () => {
  const [currentPage, setCurrentPage] = useState<number>(1);
  const { columns } = useNotificationColumns();
  const { dataSource, total, queryByParam } = useTableData<NotificationType>(
    '/notice_message/message/manage',
  );
  useEffect(() => {
    const queryParam = { page: currentPage };
    queryByParam(queryParam);
  }, [currentPage]);

  return (
    <div className={Styles.notification}>

      <Tabs className={Styles.statementTabs}>
        <Tabs.TabPane tab="System notification" key="1">
          <div className="p-6">
            <Table
              columns={columns}
              dataSource={dataSource}
              onChange={(pagination) => {
                setCurrentPage(pagination.current ? pagination.current : 1);
              }}
              pagination={{
                total: total,
                current: currentPage,
                showSizeChanger: true,
                pageSize: 10,
                pageSizeOptions: [10],
              }}
            />
          </div>
        </Tabs.TabPane>

      </Tabs>
    </div>
  );
};

React antd 滚动加载List组件逻辑

inno — Mon, 30 Jan 2023 10:18:21 +0000

如何判断何时加载根据antd List中的loadMore属性当loadMore按钮在可视区域时，加载数据，反之不加载数据

如何判断loadMore按钮是否在可见区域内使用ahooks的useInViewport判断

无限滚动加载数据(只有滚动加载时才需要请求数据放在同一个数组中) 增加滚动加载的标识

  const newItems = asl.infinite ? asl.items.concat(items) : items

1.编辑参数（page:1,pageSize:10,infinite:false）
2.删除参数（page:1,pageSize:10,infinite:false）
3.查询参数（page:1,pageSize:10,infinite:false）
4.无限滚动加载参数（page:page+1,pageSize:10,infinite:true）
只需在每次调用加载数据时page加一即可

so now i will show you how to achieve it

package AutoLoadMoreList component we need some basic conditions to judge

  import { useDebounceEffect, useInViewport } from "ahooks";
import { Button, List, Spin } from "antd"
import { useRef } from "react";

interface Props<T> {
    height?: number
    dataSource: T[]
    renderItem: (item: T) => React.ReactNode
    loading:boolean //是否正在请求数据true：正在请求，false:请求完成
    loadMore:()=>void  //滚动加载数据
    next:string|null  //是否还有数据

}
function AutoLoadMoreList<T>({ height, dataSource, renderItem,loading,loadMore,next }: Props<T>) {
    const loadMoreButtonRef = useRef(null)
    const [inViewport] = useInViewport(loadMoreButtonRef)
    useDebounceEffect(()=>{
        if (inViewport) {  //如果在可视区域加载数据
            if (next) {
                loadMore() 
            }

        }
    },[inViewport],{ wait: 1000})
    const loadMoreButton = <div
        ref={loadMoreButtonRef}
        style={{
            textAlign: 'center',
            marginTop: 12,
            height: 32,
            lineHeight: '32px',
        }}
    >
        <Button>loading more</Button>
    </div>
    return <div style={{ height: height }}>
        <Spin spinning={loading}>
        <List
            className="demo-loadmore-list"
            itemLayout="horizontal"
            loadMore={loadMoreButton}
            dataSource={dataSource}
            renderItem={renderItem}
        />
        </Spin>
    </div>
}
export default AutoLoadMoreList

package request conponent

import request from '@/packages/request';
import { useDebounceEffect } from 'ahooks';
import { message } from 'antd';

import { useState} from 'react'
interface responseType<T>{
    ok:boolean
    count:number|null
    next:string|null
    results:T|null
    error:string

}

interface GetType{url:string
    params:Record<string,unknown>}
const Get=async<T>({url,params}:GetType):Promise<responseType<T>>=>{
    try {
        const result=  await request(url, { method: 'GET', params: params }) as any

        return {
            ok:true,
            count:result.data.count as number,
            next:result.data.next,
            results:result.data.results as T,
            error:'' 
        }
    } catch (error) {
        return {
            ok:false,
            count:null,
            next:null,
            results:null,
            error: 'fail'
        } 
    }



}
type QueryType={
    page:number
    pageSize:number
    [key:string]:unknown
}
function useAsl<T>(url:string) {
 const [infinite,setInfinite] =useState<boolean>(false)
 const [query,setQuery]= useState<QueryType>({page:1,pageSize:10})
 const [loading,setLoading]= useState<boolean>(false)
 const [dataSource, setDataSource] = useState<T[]>([])
 const [next, setNext] = useState<string|null>(null)

 useDebounceEffect(()=>{
    const getList=async()=>{
        setLoading(true)
        const {ok,results,error,next}=await Get<T[]>({url,params:query})

        if (ok&&results) {
          const dateArr= infinite ?dataSource.concat(results):results
          setDataSource(dateArr)
          setNext(next) 


        }else{
            message.error(error)
        }
        setLoading(false)
    }
    getList().then()

 },[url,query],{wait:100}) 


 const loadMore=()=>{
    setInfinite(true)
    setQuery(query=>({...query,page:query.page+1}))
 }


 return {dataSource,loading,loadMore,next}
}
export default useAsl

use it

const {dataSource,loading,loadMore,next}= useAsl<NotificationType>('/notice_message/message/manage')
  <div className={Styles.tabTwo}>
          <AutoLoadMoreList<NotificationType>
          dataSource={dataSource}
          loading={loading}
          loadMore={loadMore}
          next={next}
          renderItem={(item)=><div key={item.uuid}>{item.content}</div>}
          />
          </div>

achievement

React+craco+ts+scss initial project

inno — Mon, 21 Nov 2022 11:03:43 +0000

- craco

1.npm i @craco/craco
2.Create a craco.config.js file in the root directory

my-app
├── node_modules
├── craco.config.js
└── package.json

3.Update package.json

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

4.add craco.config.js in the root directory

module.exports = function({ env }) {
    return {

    };
}

TypeScript

install

npm install --save-dev typescript ts-loader @types/react @types/react-dom

typescript - the library that converts TypeScript files (file extension with .ts or .tsx) into JavaScript.
ts-loader - Webpack loader that integrates TypeScript into Webpack. Webpack uses this loader to help convert TS
files into the JS and integrate into the final bundle.
@types/react - provide typing for React API. Also, provides intellisence and documentation.
@types/react-dom - provide typing for React DOM API. Also, provides intellisence and documentation.

2.tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "Node"
  }
}

3.Configure

add ts-loader and test for ts and tsx files

      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }

add ts and tsx to the list of extensions to resolve

 resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  }

remember to rename the js files to tsx if they have React code, else ts and fix the entry point

 entry: path.resolve(__dirname, 'src', 'index.tsx'),

Forem: inno

参照Promise/A+规范自定义实现Promise

Promise/A+规范

Promise相关问题

Terminology

Requirements

The then Method

自定义Promise

react+react-router前端路由的rbac实现方案

实现步骤

当我们拿到过滤完成后的路由时，就可以对router进行render

使用webpack5中的thread-loader和内置的Cache机制提高编译速度

开发模式状态下，影响编译速度的因素

查看webpack打包后各个模块的大小

影响编译速度的因素

封装一个工具函数对list实现滚到加载

滚动加载需要实现的功能

模拟后端接口

前端封装对应的axios请求

前端对应的数据类型

Asl滚动加载list组件

实现效果

virtual-scroll-list

virtual-scroll-list

实例功能

使用

useCallback useMomo能够达到性能优化效果源码解析（version 18.0）

question

源码分析

总结

react中useStateCallback的封装

Package

Call

Outcome

React项目中对iconFont的封装

在React项目中引入iconFont

封装

（样式的权重由高到低）

设置iconName的数据类型

封装一个hook对table的查询进行处理

table查询条件分析

React antd 滚动加载List组件逻辑

so now i will show you how to achieve it

React+craco+ts+scss initial project

- craco

TypeScript