Reactjs “是什么意思？”；“一级深”吗；？

通过React学习测试，我从本文中发现了这一点：

在为React编写单元测试时，浅层渲染可能会有所帮助。 浅层渲染允许您渲染“一层深”的组件，并且 断言有关其呈现方法返回的内容的事实，而无需担心 关于未实例化或禁用的子组件的行为 提供。这不需要DOM

---

有人能解释一下“深度层次”背后的概念吗？这是否与对象及其深度有任何关系？

组件的深度是其子级和子级的数量：

const Level1Component = ()  => <Component /> // No children

const Level2Component = ({children}) => <Component>{children}</Component>

const Level1Component=（）=>//无子级
const level2组件=（{children}）=>{children}

---

如果是子组件有子组件，那么它就是

depth=3

，依此类推。

这意味着您可以通过只渲染组件来检查父组件的状态，而不必渲染子组件的状态/数据。这有道理吗？在这种情况下，一层为顶层/浅层

{父数据}
{child-1-data}
{child-2-data}

这意味着，当测试一个组件时，内部有另一个组件，您可以将注意力集中在要测试的目标组件上，忽略其子组件、孙子组件等的内容。。。etc组件

例如，现在我想测试一个名为

的组件，它的内部有一个

：

<div>
   <h1>Hi</h1>
   <ChildComponent />
</div>

你好

使用

进行测试时，它不会呈现

的JSX部分，因此测试代码可以更简单、更纯粹：

import ShallowRenderer from 'react-test-renderer/shallow';

// in your test:
const renderer = new ShallowRenderer();
renderer.render(<ParentComponent />);
const result = renderer.getRenderOutput();

expect(result.type).toBe('div');
expect(result.props.children).toEqual([
   <h1>Hi</h1>,
  <ChildComponent /> // don't need to worry about what's inside
]);

从'react test renderer/shall'导入shallwrender；
//在您的测试中：
常量渲染器=新的浅层渲染器（）；
render.render（）；
const result=renderer.getrenderroutput（）；
expect（result.type）.toBe（'div'）；
期望（结果、道具、孩子）达到要求([
你好
//不用担心里面有什么
]);

---

（此示例类似于React文档）

它不会实例化渲染的组件的任何子组件。您可以实例化父组件并检查状态、调用方法等，而无需呈现每个子组件等。