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 摘要。