React 相关

目录

相关网址 

Redux 

准备工作

文件规范

model.js

.jsx 引入 model.js 相关

Hooks

useState

useMount

useMemo

useEffect

路由

导航式路由

编程式路由

---

相关网址 

react : 快速入门 – React 中文文档

Ant Design ： 介绍 - Ant Design

Redux 

redux 是 react 开发时，一种状态管理工具，再开发时，可以将一些方法和数据包括请求之类的封装，再整个项目都可以调用

准备工作

对应依赖

dependencies：{ 
 "umi": "^3.5.0",
 "umi-request": "^1.4.0",
 "umi-serve": "^1.9.10",
 "@umijs/route-utils": "^2.0.0",
 "dva-model-extend": "^0.1.2",
 "ahooks": "^3.7.2",
 "react": "^17.0.0",
 "react-dev-inspector": "^1.7.0",
 "react-dom": "^17.0.0",
 "react-fittext": "^1.0.0",
 "react-helmet-async": "^1.2.0",
 "react-router": "^4.3.1",
}

devDependencies：{
 "@umijs/fabric": "^2.8.0",
 "@umijs/plugin-blocks": "^2.2.0",
 "@umijs/plugin-esbuild": "^1.4.0",
 "@umijs/plugin-openapi": "^1.3.0",
 "@umijs/preset-ant-design-pro": "^1.3.0",
 "@umijs/preset-dumi": "^1.1.0",
 "@umijs/preset-react": "^2.1.0",
 "umi-serve": "^1.9.10" 
}

 @/utils/model.js

import dvaModelExtend from 'dva-model-extend'

export const createResetStoreModel = (namespace, initState, path) => {
  let isClear = true

  return {
    namespace,
    reducers: {
      resetStore(state, { payload = {} }) {
        return {
          ...JSON.parse(JSON.stringify(initState)),
          ...payload,
        }
      },
    },
    subscriptions: {
      setup({ dispatch, history }) {
        history.listen(() => {
          if (history.location.pathname !== path) {
            isClear = false
          }

          if (isClear) {
            return
          }

          if (!isClear) {
            dispatch({ type: 'resetStore' })

            isClear = true
          }
        })
      },
    },
  }
}

export const createRouteLevelModel = (namespace, initState, path, model) => {
  const resetModel = createResetStoreModel(namespace, initState, path)

  return dvaModelExtend(model, resetModel, {
    namespace,
    reducers: {
      changeStore(state, { payload }) {
        return {
          ...state,
          ...payload,
        }
      },
      changeStoreDeeply(state, { payload }) {
        return Object.assign({}, state, payload)
      },
    },
  })
}

文件规范

​

const.js     数据存放 例如：字段富化对象，表格对应数据等

index.jsx   首页 默认进入的页面

model.js    redux 相关，公共字段，接口请求和处理等

components  子组件，用于放置 index.jsx 中各个组件

model.js

必须有四个变量

namespace  当前路由对应的 name    type = String

const namespace = 'home'

resetPath     当前路由对应的 path      type = String

const resetPath = '/app/home'

initState        公共数据存储    type = Object

const initState = { dataAll :[] }

model    处理模块   type = Object

const model = {
  namespace,
  state: JSON.parse(JSON.stringify(initState)),
  effects: {
    *fetchList({ payload = {} }, { call, put, select }) {
      try {
        //  put 调用 model 方法
        yield put({
          // 对应方法 默认有个 changeStore 用于更新 initState 数据
          type: 'changeStoreDeeply',
          payload: {
            ...payload,
            isLoading: true,
          },
        })
        // select 用于获取 initState 数据 写法如下
        const { searchForm } = yield select((_) => _[namespace])
        const body = { ...formatParams(searchForm), ...pageParams }
        // call 调用对应接口请求
        const { data, code, msg } = yield call(getAuthorizationList, body)

        if (code === 200) {
          yield put({
            type: 'changeStore',
            payload: {
              dataAll: data.data || [],
            },
          })
        } else {
          throw new Error(msg)
        }
      } catch (e) {
        const errorMsg = e.message || e
        message.error(`获取审核信息列表失败${errorMsg ? `：${errorMsg}` : ''}`)
      }
    },
  },
  reducers: {
    //  可以再这对数据进一步梳理
  },
}

将 redux 返出

import { createRouteLevelModel } from '@/utils/model'
*
*
*
export default createRouteLevelModel(namespace, initState, resetPath, model)

.jsx 引入 model.js 相关

import { connect } from 'umi'

function Main({ inclusionConfig, dispatch }) {
  const {
    isLoading,
    isEditable,
    configList = [],
    resetConfigList = [],
  } = inclusionConfig

  // dispatch({
  //   type: 'inclusionConfig/changeStore',
  //   payload: {
  //     isEditable: true,
  //   },
  // })

  return <div>home</div>
}

// inclusionConfig 就是引入的对应的 redux 可以引入多个
// Main 当前页面的组件
export default connect(({ inclusionConfig,XXX }) => ({
  inclusionConfig,XXX
}))(Main)

Hooks

hook 可以帮助在组件中使用不同的 React 功能，版本大于 18 即可

引入方式

import { useState } from 'react'
或者
import { useMount } from 'ahooks'

useState

const [type, setType] = useState(true)

useState 用于创建一个双向绑定的数据，setType 是更新其值

注意：页面再次渲染后才会更新值，也就是说，再同一个函数里，即使调用 setType ，但是 type 值还是上一次的数据

useMount

useMount(() => {
  alert(111)
})

相当于初始触发

useMemo

const columnsData = useMemo(() => {
    return []
 }, [dataList])

每次重新渲染的时候能够缓存计算的结果，当 dataList 变化后，自动触发，没有变化，就调用缓存

useEffect

 useEffect(() => {
    alert(1)
  }, [])
 // 或者
 useEffect(() => {
    alert(1)
  }, [dataList])

当 dataList 变化后，自动触发，没有变化就不触发，第二个参数如果是一个空数组，就再页面初次渲染完成自动触发一次

路由

导航式路由

依赖项

 "dependencies": {
    "react-router-dom":"^2.2.2",
    "@umijs/route-utils": "^2.2.2",
  }
 "devDependencies": {
    "@umijs/fabric": "^2.14.1",
    "@umijs/lint": "^4.0.52",
    "@umijs/max": "^4.0.52",
  } 

Link 标签 / Route 标签

 import {Link ,Route } from 'react-router-dom'

 <Link  to='/home'>Home</Link>
 <Route path="/home" component={Home}/>

Link 标签会被默认为 a 标签，to 就填写对应路由 path 值

编程式路由

跳转传参

import { history } from 'umi'

history.push('/home', 
   { type: 'edit', planId: row.planId, }
 )

接收参数

import { history } from 'umi'

history?.location?.state?.planId