reactjs / reactjs/react.dev

Inconsistent usage of `.useState` in "Using the State Hook" article

Đang mở
#3,351 0 bình luận 4 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
JavaScript
Star
11.8k
Fork
7.9k
Merge trung bình
1 ngày 11 giờ
Pull request đã merge (30 ngày)
11

Mô tả

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.

https://github.com/reactjs/reactjs.org/blob/6682068641c16df6547b3fcdb7877e71bb0bebf9/content/docs/state-and-lifecycle.md#L341-L345

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.

https://github.com/reactjs/reactjs.org/blob/6682068641c16df6547b3fcdb7877e71bb0bebf9/content/docs/hooks-state.md#L37-L57

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!

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu bằng cách so sánh các ví dụ trong content/docs/state-and-lifecycle.md và content/docs/hooks-state.md, đặc biệt là các phần được liên kết về việc cập nhật state và Component Class Equivalent. Xem xét liệu các ví dụ có nên sử dụng functional updates hoặc giải thích sự khác biệt hay không, sau đó cập nhật bài viết để mối quan hệ và hành vi được rõ ràng và nhất quán.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react
Lĩnh vực
documentation
Loại issue
Tài liệu
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.