react开发记录

工作是用vue，私人项目用react开发，以学习记录

react路由懒加载 （lazy, Suspense结合使用，单用lazy会报错）

import { lazy, Suspense } from 'react'
impot Loding from './components/Loading'

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))

//2.通过指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<Loding/>}>
	<Switch>
        <Route path="/xxx" component={Xxxx}/>
        <Redirect to="/login"/>
	</Switch>
</Suspense>
1
2
3
4
5
6
7
8
9
10
11
12
13

antd@4.x后的form表单控件使用绑定数组/对象值

详细参考文章
name={['imgUrl', index]} 这样绑定是对应 imgUrl[index]

// imgUrl: ['1111', '2222']
<Form.List name="imgUrl"  >
    {(fields) => (
        <>
            {fields.map((field, index) => (
                <Form.Item
                    {...field}
                    label={"项目图片" + index}
                    name={['imgUrl', index]}
                    key={field.key}
                >
                    <Input.Group compact>
                        <Input style={{ width: 'calc(100% - 100px)' }} onChange={(e) => {
                            form.getFieldValue('imgUrl')[index] = e.target.value;
                        }} />
                        <Button style={{ width: '50px' }} icon={<MinusOutlined />} />
                        <Button style={{ width: '50px' }} icon={<PlusOutlined />} />
                    </Input.Group>
                </Form.Item>
            ))}
        </>
    )}
</Form.List>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

父组件通过ref调用子组件，需要子组件将方法暴露

  //子组件将需要的方法暴露出ref
    useImperativeHandle(ref, () => ({
        open,
    }));
1
2
3
4

• react报错：Can‘t perform a React state update on an unmounted component This is a no-op, but it indicates a memory leak in your application...
  原因： 这个警告通常出现在组件在异步操作完成之前被卸载的情况下。例如，当你在组件中发起了一个异步请求，在请求返回之前用户就导航离开了该页面，这时候异步请求返回的数据可能会尝试更新一个已经卸载的组件的状态，从而导致这个警告。
  解决方法： 在组件卸载时取消所有未完成的异步操作或订阅。你可以在组件中使用useEffect来清理这些异步操作，确保在组件卸载时取消它们。下面是一个简单的例子

import React, { useState, useEffect } from 'react';

const YourComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    fetchData().then(response => {
      if (isMounted) {
        setData(response);
      }
    });

    return () => {
      isMounted = false;
    };
  }, []);

  // 其他渲染逻辑
  return (
    // Your JSX code here
  );
};

export default YourComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

useState、useRef、let 声明变量的区别

useState 用于在函数组件中添加局部状态，并且每当状态更新时，会触发组件的重新渲染。
useRef 创建的对象中的 current 属性可以存储任何可变值，并且这个值在组件重新渲染时保持不变。
let/var 它们是用来声明变量的关键字。在函数组件中，它们声明的变量会在组件重新渲染时重新初始化为其初始值。

react封装一个权限按钮，有相应权限正常显示，没有权限则disabled

//权限封装代码
import React from 'react';
import { Button } from "antd";

const checkPermission = (userRole, allowedRoles) => {
    return allowedRoles.includes(userRole);
};
const RoleButton = ({ userRole, allowedRoles = ['admin'], onClick, children, ...rest }) => {
    const hasPermission = checkPermission(userRole, allowedRoles);
    return <Button onClick={onClick} disabled={!hasPermission} {...rest} > {children} </Button>;
};
export { RoleButton}


//使用示例：
import { RoleButton } from "@/components/RoleButton"
<RoleButton userRole='admin' allowedRoles="['admin']" type='primary' style={{ marginBottom: 10 }}
onClick={() => { navTo(-1) }}>
                再来一篇
</RoleButton>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

react路由缓存（vue的keep-alive）

react-router-dom版本5.3.0，使用react-router-cache-route插件替换Switch和Route可以实现

官网地址