react 计算优化

2020-08-21  本文已影响0人  考拉程序媛

memoization
import memoize from 'memoize-one';
getFullName = memoize((firstName, lastName) => ${firstName} ${lastName});
get fullName() {
return this.getFullName(this.state.firstName, this.state.lastName);
}
========================
React Hooks
import React, { useState, useMemo } from 'react';
function Example(props) {
[const] [firstName, setFirstName] = useState('');
[const] [lastName, setLastName] = useState('');
[const] renderFullName = useMemo(() => ${firstName} ${lastName}, [ firstName, lastName, ]);
return <[div]>{renderFullName}</[div] }
======================
$ npm install use-async-memo --save
import {useAsyncMemo} from 'use-async-memo'

const replyMessage = useAsyncMemo(async () => (
// 这里的回调函数变成了async函数
await api.fetchReply(message) // 这里也变成了await
), [message])

上一篇下一篇

猜你喜欢

热点阅读