react

最新推荐文章于 2023-10-31 09:27:45 发布

foXiNaiNai

最新推荐文章于 2023-10-31 09:27:45 发布

阅读量473

点赞数

本文链接：https://blog.csdn.net/foXiNaiNai/article/details/104801558

版权

react

react echarts 百度地图

引入全国主要城市空气质量实例图
地图不显示–bmap
是调用的百度地图的API
需要在document.ejs引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地图密钥"></script>

react mobx配置装饰器

mobx 需要使用decorator 修饰器语法但项目默认是不支持的此时我们需要配置以下

一创建项目后先使用 npm run eject 弹出webpack配置否则我们的packge.json 没有我们需要的配置项

在这里插入图片描述
此时会报错
此时使用
git add .(add后空格点)

git commit -am ‘Save before ejecting’

再使用npm run eject即可解决

cnpm install @babel/plugin-proposal-decorators
cnpm install @babel/plugin-proposal-class-properties

在 package.json 中配置如下：

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins":[
      [
        "@babel/plugin-proposal-decorators",
        {
        "legacy": true}],
       
       [
        "@babel/plugin-proposal-class-properties",
        {
        "loose": true}
       ]
    ]
  }

"eslintConfig": {
    "extends": "react-app",
    "parserOptions": {
      "ecmaFeatures": {
      "legacyDecorators": true
      }
    }
  },

cnpm i mobx -S
cnpm i mobx-react -S

函数式组件路由跳转

import { useHistory } from "react-router-dom";

 <a href="javascript:void(0)" onClick={() => { history.push("/home/addClient"); }}>

react-umi-dva-antd

首先，安装umi,创建umi项目 [umi](https://umijs.org/zh-CN/docs/getting-started)
umi --version
cnpm i umi -g
yarn create @umijs/umi-app
yarn
yarn start 
安装umi插件 umi3已经整合
yarn add umi-plugin-react
src同级创建config文件夹
	创建config.js

//umi version 2

export default {
    plugins: [
      [
        'umi-plugin-react',
        {
          antd:true, 
          dva: true,
        },
      ]
    ],
  };
  //umi version 3
  export default {

 dva: {},
 antd: {},
}
error: api.onOptionChange is not a function
[升级到umi3](https://umijs.org/zh-CN/docs/upgrade-to-umi-3#packagejson)

dva:
在src中构建models目录。该目录中存在数据模型，全局模型，所有pages中均可使用模型种的数据。
参考

import * as api from '../until/getpro';  //封装的axio调用接口
export default{
	//命名空间
	namespace:'info',
	state:{
		name:'许凯',
		age:24,
		des:"真帅呀！！！",
		list:[]
	},
	//处理state－－同步
	reducers:{
		change(state,{payload}){
			return {...state,...payload}
		}
	},
	// 异步
	// yield表示后面的方法执行完以后 call表示调用一个api接口
	// put表示一个派发
	effects:{
		*getData(payload,{call,put}){
			console.log(payload)
			const result=yield call(api.getProList,payload.payload)
			console.log(result)
			yield put({
				type:'change',
				payload:{
					list:result.data.data
				}
			})
		}
}
组件使用：
import {connect} from 'dva';
 function Index(props) {
  return (
    <div>
      <h1>Page index</h1>
	  <Button type="primary"
		onClick={()=>props.dispatch({
			type:'info/change',
			payload:{
				age:props.age-1
			}
		})}
	  >设置年龄</Button>
	  <h2>{props.name}</h2>
	  <h2>{props.age}</h2>
	  <h2>{props.des}</h2>
	  <Button type="primary"
		onClick={()=>props.dispatch({
			type:'info/getData',
			payload:{
				uid:19802,
				pagesize:50
			}
		})}
	  >获取数据</Button>
	  {
		  props.list.map((item)=>{
			  return(<div key={item.pid}>{item.pname}</div>)
		  })
	  }
    </div>
  );
}
// state中是models中所有的state,可以通过es6解构赋值来获取需要用到的state
export default connect(state=>state.info)(Index)
无状态组件中定义局部状态，可以选择16.8新增的hook来定义，useState定义局部状态，useEffect模拟生命周期。

umi配置跨域

在.umirc.js文件加上：
proxy: {
    '/api': {
      target: 'http://xxx:9000',
      pathRewrite: { '^/api': '' },
      changeOrigin: true
    }
  }
本地8000发送请求http://localhost:8000/api/data请求的数据其实是http://localh ost:9000/data

react hooks

hooks只能在FC中使用

useState

1. setState:react进入重渲染的判定依据是state对象属性值的浅比对
浅比较:
	基本类型会比较值是否相等
	复杂类型会比较引用地址是否相等,如===
	
深比较:
	复杂类型递归遍历里面的每一个属性值是否相等
	
setState修改对象中的某个属性值时，需要设置一个新的对象（object.assign合并对象到目标对象，当对象中含有引用类型时浅拷贝）
setState({
	...obj,
	age:18
})
let data = Object.assign({},obj，{age:18})
setState(data)

useEffect

它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。
由于副作用函数是在组件内声明的，所以它们可以访问到组件的 props 和 state
每次数据更新都会触发useEffect,不可以在这里使用setState

componentDidMount后会执行一次
第二个参数如果写成[],则useEffect只执行一次
如果写入当前要监听的数据，则只有当前数据变化时触发，不写的话，所有props、state有变化，都会触发
，第一个参数时回调函数，effect触发后执行，如果在回调函数中return 一个函数，这个return的函数会在组件销毁时调用
  useEffect(()=>{
    console.log(type);
    return ()=>{
      //this function will run when this component destroyed
    }
   },[type])

useRef

存取变量
在任意一次渲染中，props和 state 是始终保持不变的,在一个函数中修改了state,则这次渲染中的state和点击别的函数修改的state是不共通的，使用ref可以获取共通的state，但是，不会触发页面更新
获取dom元素
参考

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useContext

父子组件传值:解决组件嵌套过深，props层层传递的问题

//外部创建context
export const TestContext = React.createContext({)};

//父组件

//在它们的父组件上使用React的Context API
//TestContext.Provider提供了一个Context对象，这个对象是可以被子组件共享,不用单独传递props
<TestContext.Provider 
	value={{
		username: 'superawesome',
	}}
>
	<div className="test">
		<ChildComponet1 />
		<ChildComponet2 />
	</div>
<TestContext.Provider/>

//子组件中
import {TestContext} from './TestContext'
const ChildComponet1 = () => {
	const { username } = useContext(TestContext);
	return (
		<div className="navbar">
			<p>{username}</p>
		</div>
	)
}

useMemo

类似shouldComponentUpdate,避免重复渲染，state和prop变化以后一定会触发更新，可以通过useMemo 控制是否更新
时间上：useMemo是在组件渲染过程中调用，useEffect是在组件挂载以后调用
如果useMemo(fn, arr)第二个参数匹配，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次

react antdpro 简易RBAC

rbac的两种思路：

项目中使用全部的路由表，并注册，后端返回账号类型，根据类型filter符合的route渲染
缺点：浏览器输入路径可以强制访问
适用于对于权限限制的种类比较少，比较简单的权限限制
动态路由

antdpro：简易rbac
在config/routes.ts中每项路由的authority中设置可以访问的角色
antdpro-ts/src/layouts/SecurityLayout.tsx 设置登录验证规则，添加token验证（antdpro中没有token验证初次访问，而是通过mock返回guest角色
）
/mock/user.ts 中模拟登录返回的数据