Inconsistent usage of `.useState` in "Using the State Hook" article
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 11.8k
- 派生
- 7.9k
- 平均合并
- 1 天 11 小时
- 30 天内合并 PR
- 11
描述
Hello! 👋
This is my first contribution to the React Documentation, and I first wanted to say how much I love the documentation. I find the language style used throughout it to be simple, accessible, and therefore easy to follow.
As I was going through the documentation this weekend, I made my way from State and Lifecycle to Using the State Hook. In the former article, I noted the following piece of information, which I thought was an important detail about updating state.
Meanwhile, in the "Component Class Equivalent" section in the latter document, I noticed this code example did not use a function to update state using the previous state value.
I found this confusing. The point above about accommodating a possibly asynchronous state update seemed critical to ensure deterministic behaviour. I was surprised to see the code here (and throughout other parts of this article) not using a function to update the state value synchronously.
There may be a few reasons why this was done in my mind.
- The example is small/trivial enough that using a function versus a direct update does not make a major difference.
- This is a minor implementation detail not relevant to the usage of the state hook.
It's also possible I may have just misunderstood this example. I believe though that is not only inconsistent, but also makes the function component and class component inequivalent, because the original is completely synchronous, whereas the latter contains some potentially asynchronous behaviour.
Of course this is easily fixed by converting a line like
this.setState({ count: this.state.count + 1 })
to
this.setState((state) => ({ count: state.count + 1 })
I'm writing this first and foremost with the intention to clear up confusion that I experienced, and that others may as well. But I also want to ensure that my thinking is correct here!
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先比较 content/docs/state-and-lifecycle.md 和 content/docs/hooks-state.md 中的示例,尤其是关于更新状态和 Component Class Equivalent 的链接章节。检查示例是否应使用函数式更新,或解释其中的区别,然后更新文章,使这种关系和行为清晰且一致。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react
- 领域
- documentation
- Issue 类型
- 文档
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 活跃度
- 停滞
- 描述清晰度
- 描述清楚
- 新手友好度
- 35/100