React 应用程序中的数据流与/功能组件和挂钩

Question

我正在尝试在带有功能组件和挂钩的 React 应用程序中思考数据流。

我在想：

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

为了阐明我的想法，我在每个文件名的结尾都加上了这样的标签约定：我声明（并请求更正！）1 是 2 的父级； 2 是 3a（我认为...自定义钩子可以是“子”吗？）、3b 和 3c 的父级； 3c 是 4c 的父级。

显然 parent/child 数据流是 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组件，无论是class-based组件还是functional组件都是一个实现细节。数据以道具的形式向下反应树parent流向child。这是 React 中普遍存在的真理。

When a data change (state change) causes a cascade of code to execute... what code (say, in each component, does and does not run... apparently there is selectivity such is "don't put that variable in the deps array if you don't want that code to run")?

当状态 and/or 道具更新时，功能组件被重新渲染。整个功能组件的功能体是技术上“渲染”功能，所以它的全部组件渲染时是运行。

你问的是hooks。钩子也会在每个渲染周期执行，按照它们被声明的顺序，如果存在依赖数组，它会被评估，如果 any 依赖未能通过浅引用相等性检查，那么钩子的回调是触发。

How is the "family" part of the family tree determined during such a data-cascade? Does data pass to siblings? Does it only go to a child (or a parent if a function was passed down for updating the parent)?

React 树的确定方式与几乎总是确定的方式相同，即根节点和 children，其中每个 child 组件可以有更多的 children。数据仍然只从 Parent 传递到 Child。回调仍然作为 props（通常）传递给要调用的 child 组件。

评论问题

Is useAppLogic considered a child [of App in this case], or can custom hooks not be considered children (for whatever reason)? Assuming the answer is yes, then couldn't useAppLogic return a value that gets passed to its sibling, FooComponent? If yes, wouldn't this be data flowing "horizontally" and not down? I don't know the answer... but it seems like this kind of data-pass is possible (maybe it is an anti-pattern, I don't know).

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

What if (in the above case we have been discussing in these comments) useAppLogic was use by both App and App's child, FooComponent? Would this be an anti-pattern? This would apparently allow a parent and a child to have a piece of data that was not "passed down". (To go out on a limb... is this a window into a conversation on global data/useReducer?). Maybe these points here in the comments would help some people if they were in the answer.

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

React 应用程序中的数据流与/功能组件和挂钩

Data flow in React app w/ functional components & hooks

state

reactjs

react-hooks

react-functional-component

评论问题