learning项目总结

1. Dialog组件：当背景图片是不规则情况，可以把内容写在传递函数中：modalRender={() => ()}，而不是在>后面写 。
2. 所有的点击按钮都要加上cursor：pointer，会让用户知道在哪儿点击。
3. 对于需要兼容undefined / is not function的函数，直接可以在()后面加上?.进行访问,即可解决兼容问题。

const getOpenData = window.openData?.();

1. 函数形式的代码中有时候有组件形式的代码，调用需要加上this.
2. 当埋点的时候遇到从别的地方引入的函数，像learning项目里面的handleClickConsult，则可以传递一个变量，

   onClick={() => handleClickConsult("offSiteCustomer")}
   

   进行判断是哪个地方传过来的，之后再加上不同的埋点信息。
3. Modal组件的visible属性现在快不支持使用了，可以使用open代替。

4. export const handleClickConsult = (name) => {
    
   // @ts-ignore
    
   // window.showConsultModal && window.showConsultModal();
    
   // 钉钉预约演示跳转钉钉客服
    
   const trackerData = {
    
   offSiteCustomer: {
    
   actionName: "点击在线客服",
    
   actionGroup: "在线客服",
    
   productName: "学习中心",
    
   },
    
   footer: {
    
   actionName: "点击底部在线咨询",
    
   actionGroup: "在线咨询",
    
   productName: "学习中心",
    
   },
    
   rightFloating: {
    
   actionName: "点击右侧在线咨询",
    
   actionGroup: "在线咨询",
    
   productName: "学习中心",
    
   },
    
    
   };
    
   //判断name是否在trackerData里面，在的话就使用 ...trackerData[name]里面的
    
   if (trackerData[name]) {
    
   trackerAction({
    
   ...trackerData[name],
    
   actionName: name,
    
   actionGroup: "预约演示",
    
   productName: "OKR学习",
    
   });
    
   }
    
   };
   

1. 防抖函数debounce对于高频率点击的函数，要让函数等待一定的时间才完成运行。以此来防止函数多次执行，造成内存泄漏。让debounce函数（）内的代码运行完成后，再等待指定的时间之后，才能完成handleSee函数的执行。当在debounce函数（）内的运行的过程中或者等待指定的时间期间内，再次调用了debounce函数，则让（）里面的代码重新运行之后再等待指定的时间，直到没有其他调用打断函数的执行。

const handleSee = debounce(async (data) => {
try {
setIsPlayerVideo(true);
const res = await seeLearning(data.learningId);
if (res && res.Code === 1) {
setIsRead(true);
setShowNoticePop(false);
}
} catch (error) {
Toast.Error('error', { canClose: false });
}
}, 500);