这个问题更多的是为了更多地了解反应如何处理和对变化做出反应,而不是实现,因此我让 immutable-props-apprach 稍微发展一下。
我试图获取数组的第一个元素并将其从原始数组中删除,该数组作为道具传递给组件:
const ChildComponent = ( arrayToChange: Array<any>[] ) => { const elementFromArray = arrayToChange.shift(); }
从shift()方法的定义来看::
shift() 方法从数组中删除第一个元素并返回该删除的元素。此方法更改数组的长度。
尽管 elementFromArray 变量现在包含数组中的元素,但数组是完整的,它没有受到任何影响,仍然包含所有元素。
但这怎么可能呢? React 应该通过引用传递 props,因此原始数组应该受到影响。如果 React 采取了一些保护措施,并且这些更改不会反映在父级中,我会理解,但是,我仍然希望更改能够反映在子级中。 我找不到任何有用的东西来解释这种行为,大多数资源只提到了 props 的不可变方法以及如何找到解决方法,而不是其背后的原因或逻辑。
尽管 elementFromArray 变量现在包含数组中的元素,但数组是完整的,它没有受到任何影响,并且仍然包含所有元素。但是,如果我使用 Push() 方法,则会反映更改,arrayToChange 会多包含一个元素。
我的问题是 - 为什么 arrayToChange 对这些方法的反应不同?如果shift()不改变内容,我希望push()也不会。
如果您将渲染过程视为广度优先算法,则可以解释代码片段中的行为。
JSX 将转换:
进入以下 JavaScript:
React.createElement(ChildShowArray, { array: letter })
创建一个不会立即调用ChildShowArray
组件的结构。它将创建某种中间结构/对象,仅在渲染器要求它运行时运行。放置在
{...}
(JSX 上下文)中的 JavaScript 直接作为参数传递,因此直接解析。这意味着Parent
中的所有{JSON.stringify(letters)}
在子组件中的任何代码运行之前运行。当构建父结构完成后,渲染器将访问每个中间结构/对象并要求其渲染。这是从上到下完成的,这就是为什么第一个
ChildShowArray
渲染仍然显示完整数组的原因。然后渲染ChildChangeArray
并删除第一个元素。第二个ChildShowArray
渲染反映了此更改,并且在没有第一个元素的情况下进行渲染。请注意,
shift()
确实会更改letters
的内容,但是当调用它时,Parent
的内容已经呈现并且不再变化。此更改确实会影响下一次渲染的Parent
(单击代码片段中的“重新渲染”按钮)。它还会影响其下方使用相同数组引用的其他子组件的渲染。我不完全确定这个问题是什么,但我在这里冒险猜测一下,所以请在这里发表评论,我会在投票之前进行更改。
我认为你应该在你的子组件中尝试这个:
然后使用“data”映射到 jsx 中的输出
然后在父组件中,对 arrayToChange 进行移位。您可以将 useEffect 视为一个“观察者”,当数组长度发生变化时它将触发。