目錄
- react
- 小程序
- vue
- typescript
- 經(jīng)驗（踩坑）
react
useMemo 和 useCallback 都是用來做性能優(yōu)化的，把 useMemo 當(dāng)成一個值，把 useCallback 當(dāng)成一個函數(shù)即可。
useEffect
useEffect 是在布局（layout）和繪制（paint）之后觸發(fā)的。
useEffect 不提供依賴數(shù)組和提供空數(shù)組有什么區(qū)別？
給它一個空數(shù)組就像 componentDidMount 一樣，它只運行一次。
不給它第二個參數(shù)充當(dāng) componentDidMount 和 componentDidUpdate ，因為它首先在安裝上運行，然后在每次重新渲染時運行。
useEffect 忽略依賴列表的 functions 時， 是否安全？
答案是，否?？磦€示例：
function Example({ someProp }) {
function doSomething() {
console.log(someProp);
}
useEffect(() = >{
doSomething();
}, []); // ?? This is not safe (it calls `doSomething` which uses `someProp`) }
}
可以改進(jìn)一下，將 function 丟進(jìn) useEffect 的回調(diào)里：
function Example({ someProp }) {
useEffect(() = >{
function doSomething() {
console.log(someProp);
}
doSomething();
},
[someProp]); // ? OK (our effect only uses `someProp`)
}
也可以使用 useCallback 包裹函數(shù)：
function Example({ someProp }) {
const doSomething = useCallback(() = >{
console.log(someProp);
},
[someProp]);
useEffect(() = >{
doSomething();
},
[doSomething]);
}
useCallback
使用空數(shù)組作為輸入的 useCallback 和沒有第二個參數(shù)的 useCallback 之間有什么區(qū)別？
如果第二個參數(shù)是一個空數(shù)組，則該值將被內(nèi)存一次并始終返回。
如果省略第二個參數(shù)，該值將永遠(yuǎn)不會被內(nèi)存。
useLayoutEffect
useEffect 和 useLayoutEffect 的區(qū)別：
useEffect 是異步執(zhí)行的，而useLayoutEffect是同步執(zhí)行的。
useEffect 的執(zhí)行時機是瀏覽器完成渲染之后，而 useLayoutEffect 的執(zhí)行時機是瀏覽器把內(nèi)容真正渲染到界面之前，和 componentDidMount 等價。
一般會影響到渲染的操作盡量放到 useLayoutEffect 中去，避免出現(xiàn)閃爍問題。
參考：https://zhuanlan.zhihu.com/p/348701319
小程序
使用 Component 來實現(xiàn)接收跳轉(zhuǎn)參數(shù)，無需通過 onLoad 的 options 參數(shù)獲取哦：
只需在 Component 里面聲明 properties 即可, 別的頁面跳轉(zhuǎn)過來待參，就可以通過 this.data 獲取到相應(yīng)的 property。
普通頁面：
<navigator url="/pages/組件頁面?activeIndex=1">我是跳轉(zhuǎn)按鈕</navigator>
組件頁面：
Component({
properies: {
activeIndex: String,
},
methods: {
onLoad() {
console.log(this.data.activeIndex); // '1'
}
}
})
小程序頁面返回帶參方案：
通過 navigateTo 的 success 的 response 里的 eventChannel 來向目標(biāo)頁發(fā)布事件，而目標(biāo)頁可通過this.getOpenerEventChannel() 來監(jiān)聽事件，示例：
// 當(dāng)前頁
wx.navigateTo({
url,
success: ({ eventChannel }) = >{
eventChannel.emit('init', {
a: 1
});
}
});
// 目標(biāo)頁
ready() {
this.getOpenerEventChannel().on('init', ({
a
}) = >{
// doSomething
});
}
ios 掃小程序碼沒有進(jìn)入小程序，而是進(jìn)入一個空白網(wǎng)頁：
ios 需要有權(quán)限才可訪問小程序，改 appid，需要已經(jīng)添加過開發(fā)者的 appid
vue
自動引入路由實現(xiàn)方案：（底層是利用 require.context api 實現(xiàn)，即是說，require.context 可以引入多個文件）
路由的目錄為：
router
- modules
- index.js
const modules = require.context('./modules', true, /\.js$/);
modules.keys().forEach(name => {
const module = modules(name);
if (module.default) {
addRoute(module.default);
} else {
Object.values(module).forEach(addRoute);
}
});
typescript
TypeScript 中當(dāng)一個變量為 object 或 null 時，使用解構(gòu)賦值可能報錯的解決方法（在變量后面加個!即可）：
type SomeData = {
a: string;
b: string;
c: string;
};
const someData: SomeData | null = null;
const { a, b, c } = someData!;
類型推斷
可以合理利用類型推斷，節(jié)省返回參數(shù)聲明。
示例：
// api.ts
export function getSomething() {
return get<Res<Something[]>>({
url: xxx
});
}
// index.ts
import { getSomething } from './api';
const _getSomething = async () => {
/**
* 此處的 data 可以不做類型聲明，因為在 api.ts 里面已經(jīng)聲明了
* 然后 return 即會觸發(fā) typescript 的類型推斷，因此推斷出 data 的類型了
*/
const { data } = await getSomething(6);
// do something
};
經(jīng)驗（踩坑）
Taro-cropper 在某些情況下“完成”按鈕沒顯示出來：
雖然不知道具體原因，但是翻看其源碼可以看到它的 props 里有一行注釋:
hideFinishText: boolean, // 隱藏完成按鈕（可以自己實現(xiàn)，然后調(diào)用本實例的cut方法進(jìn)行剪裁）
因此，解決方案就是自己實現(xiàn)一份“完成”按鈕，Over。
帶分頁數(shù)據(jù)的實時刷新方案：
可以以第一頁的數(shù)據(jù)為模板，在輪詢的時候進(jìn)行比較，如果出現(xiàn)差異，則為（數(shù)據(jù)）有更新，然后更新數(shù)據(jù)為最新第一頁數(shù)據(jù)即可。
export default 不能正確解構(gòu)：
export default 經(jīng)過了 webpack的構(gòu)建后，會變成類似：
import a from './a'
a.default.b
因此無法通過解構(gòu) a 來拿到 b，如果想要能正確解構(gòu)拿到變量，盡量這樣操作：
export const b = 1
