javascript - 从自定义反应钩子返回函数数组?
问题描述
我有一个自定义反应钩子:
function useItem(id) {
const [value, setValue] = useState();
useEffect(() => {
databaseRead(id).then(i => setValue(i));
}, [id]);
function setItem(i) {
setValue(i);
}
function writeItem(i) {
databaseWrite(id, i);
}
return [value, setItem, writeItem];
}
在组件中使用这样的钩子时,返回的 writeItem 函数每次值更改时都会更改(大概是因为我每次都创建一个新数组)。
当我在这样的项目中使用我的钩子时,如何避免重新呈现 Button 组件?
function Item(props) {
const [item, setItem, writeItem] = useItem(props.id);
return(
<>
<ItemEditor data={item} setItem={setItem}/>
<Button onPress={writeItem}/>
</>
)
}
我目前工作但尴尬的方法是从我的钩子返回一个 useRef 对象而不是数组:
function useItem(id) {
const retVal = useRef({
value: value,
setItem: setItem,
writeItem: writeItem
}).current;
const [dirty, setDirty] = useState();
function makeDirty() { setDirty(Math.random()); }
//and instead of setValue(i) do retVal.value=i; makeDirty();
return retVal;
}
非常感谢!
解决方案
您可以使用useCallback
钩子来记忆函数,这样它们就不会在每次渲染时再次创建
function useItem(id) {
const [value, setValue] = useState();
useEffect(() => {
databaseRead(id).then(i => setValue(i));
}, [id]);
const setItem = useCallback(function(i) {
setValue(i);
}, []);
const writeItem = useCallback(function(i) {
databaseWrite(id, i);
}, [id]) // this depends on id, and need to be recreated on id change
return [value, setItem, writeItem];
}
推荐阅读
- python - 在没有 time.sleep 的代码中添加时间延迟(代码包含线程)
- arrays - 为什么 VBA 数组不能在子程序内的 ArrayList ReDim 中保留范围?
- elasticsearch - Elasticsearch 过滤聚合以返回一个指标
- php - 如何访问 json / php 中的嵌套数据
- r - 从包含带有标签信息的列表的数据框中提取某些内容
- node.js - 无法“nvm install 8.0.0”
- notifications - 关于向外部系统通知状态更改的方法的建议:业务层通知与数据库触发器
- google-cloud-platform - 添加 Google Cloud SDK apt 存储库签名密钥的 Ansible 任务
- google-apps-script - 通过将联系人 API 迁移到人员 API,我如何获取具有特定标签的联系人列表?
- google-chrome-extension - Chrome 扩展 - 从商店更新刷新所有标签