React工作笔记

5年Vue项目需要转React开发

vue+element+js=> react + ant design + ts 每日积累 react ts写法

2023/11/04

1、import React, { useEffect, useState, useRef } from 'react';

useEffect：我理解就是vue的mounted()函数，是React中的一个钩子函数，用于处理副作用操作。副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，比如数据获取、订阅事件、操作DOM等。

useEffect(() => {
  // 副作用函数
  // 在组件渲染时执行
  // 可以进行副作用操作
}, [依赖数组]);

副作用函数会在组件渲染时执行，并且在每次组件更新后也会执行。如果依赖数组不为空，并且依赖数组中的值发生变化时，副作用函数也会被重新执行。如果依赖数组为空，副作用函数只会在组件首次渲染时执行一次。副作用函数可以返回一个清除函数，用于清除副作用操作。参考React中useEffect函数

2024/03/20 整理

1.vue中常用v-if来实现重新渲染dom，对应react中一般采用三元表达来实现，譬如下面代码刷新tree：

<div>
  { 
    treeData.length === 0 (
      <div>加载中...</div>
    ) : (
      <Tree
        checkable
        checkStrictly
        multiple={true}
        loadData={({ key, children }) => onLoadData({ key, children })}
        onCheck={treeOnCheck}
        checkedKeys={{
            checked: checkedKeysArr,
            halfChecked: [],
        }}
        >
            {renderTreeNodes(treeData)}
        </Tree>
    )
}
</div>

2.父子交互

2.1父组件调用子组件方法, set/get子组件数据->ref 跟vue的this.$refs['queryTreeData'].xxx()

父组件:

// html
<Inquire
  ref={queryTreeData}
/>
// js
import Inquire from './common/Inquire'; // 子组件Inquire
const queryTreeData: any = useRef(null); // 子组件tree-ref
queryTreeData.current.setMainTreeInit(); // 调用子组件初始化
queryTreeData.current.getAllKeysF();// 获取子组件数据

子组件Inquire:

//js
const [treeData, setTreeData] = useState<any[]>([]);
useImperativeHandle(ref, () => ({
  setMainTreeInit,
  getAllKeysF,
}));
const setMainTreeInit = (data: any) => {
  setTreeData(data); // 设置树 数据
};
const getAllKeysF = (key: any) => {
  return JSON.parse(JSON.stringify(allTreeKeys));
};

2.2子组件调用父组件方法 vue的this.$emit('clickTreeNodeFuc')

父组件:

// html
<Inquire
  clickTreeNodeFuc={setHistoryLog}
/>
// js
import Inquire from './common/Inquire'; // 子组件Inquire
const setHistoryLog = (flag: string) => {
  setEditHisList([flag]);
}；

子组件Inquire:

//js
interface InquireProps {
  clickTreeNodeFuc: any;
  ref: any;
}
const Inquire: React.FC<InquireProps> = forwardRef((props, ref) => {
  const setMainTreeInit = (data: any) => {
    props.clickTreeNodeFuc('init');
  };
})

2.3父组件传递子组件数据

父组件：

// html
<TreeGraph
  ref={TreeGraphRef}
  collapsed={collapsed}
 />

子组件监听父组件的collapsed值

interface InquireProps {
  ref: any;
  collapsed: any;
}
const TreeMap: React.FC<InquireProps> = forwardRef((props, ref) => {
    useEffect(() => {
        graphInit();
    }, [props.collapsed]);
});

2.3 父子交互特殊props

父组件

const BasicLayout: React.FC = (props) => {
  const [collapsed, setCollapsed] = useState<boolean>(false);
  const layoutcontent: any = useRef(null); // 子组件tree-ref
  const getCollapsedF = () => {
    return layoutcontent.current;
  };
  const setCollapsedF = () => {
    setCollapsed(!collapsed);
    layoutcontent.current = !collapsed;
  };
  return (
    <div style={{ minWidth: 'auto' }}>
        {/* {children} */}
        {
          React.Children.map(props.children, (child: any) => {
            return React.cloneElement(child, {
                getCollapsedF: getCollapsedF,
                setCollapsedF: setCollapsedF,
                collapsedF: layoutcontent.current,
            });
          });
        }
    </div>
  )
}

子组件Children：

interface InquireProps {
  ref: any;
  collapsedF: any;
  getCollapsedF: any;
}
const TreeMap: React.FC<InquireProps> = forwardRef((props, ref) => {
  useEffect(() => {
    TpWatermark(userInfo.login, '170', '400', '-20', '#999', '20', '.15');// 添加水印
    let one = window.addEventListener('scroll', scorePOI, true); //监听滚动条变化
  }, []);
  function scorePOI() { // 根据父组件折叠状态去设置屏幕滚动时fixed布局的定位
    if (window.scrollY > 374) {
      setTreeClass('Fixed-Tree');
      if (props.getCollapsedF()) {
        // layouts收起
        setTreeClass('Fixed-Tree2');
      } else {
        setTreeClass('Fixed-Tree');
      }
      setJumpTopClass('jump-top');
    } else {
      setTreeClass('Block-Tree');
      setJumpTopClass('jump-top-n');
    }
  }
});