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));
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值