React学习及总结

React 类

// 首字母大写 表示类。
function ContractList(){
  ...  
}
// 首字母小写表示方法。
function onChangeContractType(value){
    ...
}
// async 也可以修饰方法 async表示异步
async function getContractApplyOrder(id,submit,setCreateWay){
 	...   
}
// 分页至少有三个属性。 currentPage,pageSize,totalCount

不加载整个页面，只加载部分

// 加载整个页面
location.reload();
// 不加载整个页面，使用接口查询结果，只渲染列表组件
getApplyOrderById(applyOrderId);

常用函数

// useState为全局变量赋值。 有useState([])空数组,useState({})空对象, useState(null) null值;  
const [editType,setEditType] = useState(false);

// useParams()表示传入的参数
const {contractType, status, contractId} = useParams(); 

// useEffect 表示初始化或者值有变化时，就触发此动作。
useEffect(()=>{
    if(contractId){
       setEditType(false);
    }
},[contractId]); // 当[contractId]为[] 表示页面加载时，初始化加载。 只加载一次。

// useRef() 
const purchaseInfoRef=useRef(); // 表示使用的是父组件传入的值

// useMemo() 使用内存的值，当内存的值有变化，就更新。与useEffec类似
const applyOrderInfo = userMemo(()=>{
    return {
        id: applyOrderId,
        bizType:bizDto?.bizType, 
        auditList: applyOrderInfo.auditList,
    }
},[currentContractInfo])

// 跳转页面
window.location.href= `${location.orgin}/contract/v2/contractList` // 

数组

// 数组遍历 forEach 无返回值
riskHandleResultList.forEach((item)=>{
   calibrationList.push({
      executor:gmtModifier,
      executorNo: gmtModifierId,
      ...item, // 表示item剩下的所有字段
   });
});
// 数组遍历，也可以用map，有返回值 ?表示fileInfoList是否为空，不为空时，执行map的代码
const upFileList= fileInfoList?.map((item)=>{
    return {
        ...item,
        progress: 100,
        status:true,
    }
}) ||[]  // ||[] 表示无数据时，返回空数组

// slice 截取数据
contractList?.slice((pageProps.current-1)*pageProps.pageSize, pageProps.current*pageSize) || [];

// push添加数据
contractList.push({contractId:id, contractStatus: status});

浅拷贝与深拷贝

// [...arr] 浅拷贝
const list =[...paymentInfoList];

// 深拷贝 当希望数组数据发生改变时，不影响老的数组数据时，采用深拷贝
const list =JSON.parse(JOSN.stringify(paymentInfoList));