如何避免使用中的 setState 效果钩子导致第二次渲染

Question

我正在编写一个自定义钩子，它将id作为输入，然后应该执行以下任务：

• 从存储中同步获取该 ID 的数据
• 订阅此存储中的更改并相应地更新数据

我想出了以下实现，它的缺点是我直接从效果钩子内部设置状态，从而导致第二次渲染。

function useData({id}) {
// set initial data on first render
const [data, setData] = useState(Store.getData(id));
useEffect(() => {
// when id changes, set data to whatever is in store at the moment
// here we call setData directly from inside useEffect, causing a second render
setData(Store.getData(id));
// subscribe to changes to update data whenever it changes in the store
return Store.onChange(id, setData);
}, [id]);
return data;
}

我尝试的第二种方法是添加一个虚拟状态，该状态仅用于导致重新渲染。在这种方法中，我直接返回从 Store.getData() 接收的数据。这确保了我将在每次渲染时获得最新的数据，并且 useEffect 确保每个 onChange 触发器都会导致新的渲染。

function useData({id}) {
// adding some dummy state that we only use to force a render
const [, setDummy] = useState({});
const refresh = useCallback(() => {
setDummy({});
}, []);
useEffect(() => {
// subscribe to changes cause a refresh on every change
return Store.onChange(id, refresh);
}, [id, refresh]);
return Store.getData[id];
}

第二种方法效果很好，但添加这种虚拟状态感觉很奇怪。当然，我可以把它放到另一个useRefresh钩子中，但我不确定这是否真的是一个很好的做法。

有没有更好的方法来实现这一点，而无需直接从 useEffect 内部调用 setData，也不依赖于一些未使用的虚拟状态？

Answer 1

所以现在你在钩子中使用useState只是为了在存储更改后重新触发主机组件的渲染。从外部获取更改处理程序怎么样？

function useData(id, onChanged) {
useEffect(() => {
return store.onChange(id, onChanged);
}, [id, onChanged]);
return store.getData(id);
}