带有功能组件和钩子的 React 应用程序中的数据流

Question

我正试图在一个带有功能组件和钩子的 React 应用程序中围绕数据流展开思考。

我想知道：

1. 当数据更改（状态更改）导致执行级联代码时...什么代码（例如，在每个组件中运行和不运行...显然存在选择性，例如“不要放那个如果您不希望 那个 代码运行，则在 deps 数组中的变量")？
2. 在这样的数据级联过程中，家庭树的“家庭”部分是如何确定的？数据会传递给兄弟姐妹吗？它是否只传给子代（如果传递了用于更新父代的函数，则传给父代）？

为了澄清我的想法，我在每个文件名的结尾都使用了这样的标签约定：我声称（并要求更正！）1 是 2 的父级； 2 是 3a 的父级（我认为……自定义挂钩可以是“子级”吗？）、3b 和 3c；而 3c 是 4c 的父级。

显然，父/子数据流是 React 的自然组成部分。兄弟姐妹之间呢？那是问题发生的地方吗？当然，在给定文件中“传递数据”可能是危险的（相对于控制是否以及何时渲染一段数据），显然解决方案是将数据“提升”到树上。但即便如此……如果不清楚数据如何回落……以及我们应该寻找什么问题，那么将数据提升一个（或更多）水平是没有意义的。

index1.tsx

...
<App/>
...

App2.tsx

...
const App = () => {
  ...
  const {varFromCustomHook} = useAppLogic(varToCustomHook);
  ...
  <FooComponent varToFoo={varToFoo} functToFoo={functToFoo}/>;
  <BarComponent/>;
  ...
};
...

useAppLogic3a.tsx

...
interface Props {
  varToCustomHook;
};
const useAppLogic (props: Props) {
...
  return {varFromCustomHook};
};

FooComponent3b.tsx

...
interface Props {
  varToFoo;
  functToFoo;
}
const FooComponent = (props: Props) => {
  ...
  funcToFoo(importantData);
  ...
  <div>{varToFoo}</div>;
  ...
};

BarComponent3c.tsx

...
const BarComponent = () => {
  ...
  <FoobarComponent/>;
  ...
};

FoobarComponent4c.tsx

...
const FoobarComponent = () => {
  ...
};

Answer 1

一个react组件就是一个react组件，不管是基于类的组件还是函数式组件都是一个实现细节。数据以 props 的形式向下流向反应树，从父级到子级。这是 React 中的普遍真理。

当数据变化（状态变化）导致代码级联 执行...什么代码（例如，在每个组件中，运行和不运行...... 显然存在选择性，例如“不要将该变量放入 如果您不想运行该代码，请使用 deps 数组")？

当状态和/或道具更新时，功能组件被重新渲染。功能组件的整个函数体技术上是“渲染”函数，因此所有在组件渲染时运行。 p>

您专门询问钩子。每个渲染周期都会执行钩子，按照它们声明的顺序执行，如果存在依赖数组，则对其进行评估，如果 any 依赖未能通过浅层引用相等性检查，则触发钩子的回调。

在这样的过程中，家谱中的“家庭”部分是如何确定的？ 数据级联？数据会传递给兄弟姐妹吗？是不是只给孩子 （或者如果传递了一个函数来更新父级，则为父级）？

React 树的确定方式与几乎总是相同的方式确定，一个根节点和子节点，其中每个子组件都可以有更多的子节点。数据仍然只从父级传递给子级。回调仍然作为 props 传递（通常）以供子组件调用。

评论问题

useAppLogic 是否被视为 [在这种情况下为 App 的子级]，还是可以自定义 钩子不被视为儿童（无论出于何种原因）？假设 答案是肯定的，那么无法使用AppLogic 返回一个得到的值 传递给它的兄弟 FooComponent?如果是，这不是数据吗 “水平”流动而不是向下流动？我不知道答案……但它 似乎这种数据传递是可能的（也许是 反模式，我不知道）。

不，useAppLogic 是一个反应钩子，不能是任何东西的孩子，它是一个函数。只有 React 组件、HTML 元素和原语（字符串、数字等）可以是子元素，呈现为 JSX。数据只会向下流动。如果需要将数据传递给兄弟姐妹，则至少需要将其提升到最近的共同祖先。如果useAppLogic 在App 中，并且FooComponent 是App 的子级，则挂钩返回的任何值都可以作为prop 传递给FooComponent。

如果（在上述情况下，我们已经在这些 cmets 中讨论过）怎么办 应用程序和应用程序的孩子 FooComponent 都使用了 useAppLogic？将 这是反模式吗？这显然允许父母和 孩子有一块没有“传递”的数据。 （出去 在肢体上……这是进入全球对话的窗口吗？ 数据/useReducer？）。也许 cmets 中的这些要点会有所帮助 一些人，如果他们在答案中。

React 钩子都是它们自己的实例。他们不共享任何状态，或与此相关的任何其他内容。没有足够的上下文来说明使用相同反应钩子的父组件和子组件是否是反模式，但我倾向于说不，不是，因为任何功能组件都可以使用任何反应钩子几乎出于任何原因。不是任何全局数据的窗口（useContext 钩子会尽可能接近一些“全局”数据）。