Questionable Comment in the `useEvent` Example
還沒有人認領這個 Issue。
- 主要語言
- JavaScript
- 星號
- 11.8k
- 分支
- 7.9k
- 平均合併
- 1 天 11 小時
- 30 天內合併 PR
- 11
描述
I found a paragraph from Separating Events from Effects in the beta React Docs, which I couldn't wrap my head around:
In this example,
urlinsideonVisitcorresponds to the latesturl(which could have already changed), butvisitedUrlcorresponds to theurlthat originally caused this Effect (and thisonVisitcall) to run.
The mentioned example is effectively the one below:
function Page({ url }) {
const { items } = useContext(ShoppingCartContext);
const numberOfItems = items.length;
const onVisit = useEvent(visitedUrl => {
// `url` captured here is claimed to be the latest, not the original
// but what about `numberOfItems`?
logVisit(visitedUrl, numberOfItems);
});
// intend to log the `url` that originally caused this Effect,
// along with the original `numberOfItems`.
useEffect(() => {
setTimeout(() => {
onVisit(url);
}, 5000); // Delay logging visits
}, [url]);
// ...
}
More essentially, I believe my confusion stems from the claims below:
This solves the problem. Similar to the
setfunctions returned fromuseState, all Event functions are stable: they never change on a re-render. This is why you can skip them in the dependency list. They are not reactive.
How can Event functions like onVisit are stable, when they need to capture the relevant reactive values like numberOfItems?
Are they stable, but have access to the freshly-constructed anonymous function, which captures the relevant reactive values?
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
從 issue 中連結的「Separating Events from Effects」範例開始,並將關於 useEvent 穩定性的說法與所顯示的 numberOfItems 和 url 值進行比較。完成的標準是文件清楚說明延遲 callback 觀察到哪些值,並解釋為什麼可以將事件函式從相依項中省略。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, react
- 領域
- documentation
- Issue 類型
- 文件
- 難度
- 5/5
- 預估耗時
- 一週以上
- 活躍度
- 停滯
- 描述清晰度
- 需要釐清
- 新手友好度
- 25/100