reactjs / reactjs/react.dev

The definition of one-way data flow is confusing

未關閉
#6,228 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
JavaScript
星號
11.8k
分支
7.9k
平均合併
1 天 11 小時
30 天內合併 PR
11

描述

I was researching about data binding concept.
then found followings.

  1. one-way data binding
  2. two-way data binding

What I understand about data binding is about how Data and View are affecting each other.

  1. one-way data binding is using event-listener function to achieve View to Data Data to View together.
    (i.e, displaying input value in <p> tag.)
  2. two way data binding is using the binding syntax (not using event-listener) and it can achieve View to Data Data to View
    (i.e, displaying input value in <p> tag.)

but when I read the official React document on react.dev.

It talks about one way data flow which is a bit confusing expression then it says this concept is about top to bottom parent to child. (which is completely different from the definition of one-way data binding).

// from the link below.
Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component.

https://react.dev/learn/thinking-in-react#step-4-identify-where-your-state-should-live

then when it talks about two way data binding the document brings displaying the input value on screen.
Which is not related to topic about Top to Bottom.

// from the link below.
React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you’ll see that React ignores your input. 

https://react.dev/learn/thinking-in-react#step-5-add-inverse-data-flow

I feel like this concept needs to be updated to clarify the concept of data binding.
or if the document content is correct, Can someone explain what I am missing or confused about this document?

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

從連結的 Thinking in React 章節開始,尤其是「Identify Where Your State Should Live」和「Add Inverse Data Flow」,並比較它們如何使用「one-way data flow」和「two-way data binding」。當文件清楚地區分這些概念,或解釋造成混淆的術語時,即可視為完成。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
javascript, react
領域
documentation
Issue 類型
文件
難度
3/5
預估耗時
1-2 天
活躍度
停滯
描述清晰度
需要釐清
新手友好度
35/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。