在 React 中跳过渲染子项

Question

React 中有没有一种方法可以跳过渲染子项？ 我在页面上有现有的 DOM 节点，我只想将其包装在 React 组件中。

我的用例是渲染框架而不是 static 内容，它们是预先存在的 DOM 节点。

就像是：

const Frame = (props) => (
  <div class="frame">
    <SkipRender>{props.children}</SkipRender>
  </div>
)

Answer 1

我猜，当你说“静态孩子”时，你的意思是你不想重新渲染它们？ 如果是这样，那么我有一个解决方案给你。

React 有一个称为 memoization 的特性，它会记住一个值，并且只在它依赖的值（它的“依赖项”）更新时更新它。 我们可以通过useMemo()钩子来实现它。 SkipRender组件看起来像这样：

function SkipRender(props) {
    const children = useMemo(() => {
        return props.children;
    }, []);
    return children;
}

我们在这里做的是接收传递的子元素，记忆它（记住它的初始值），并保留它 static。第 4 行的空依赖数组[]意味着children变量没有它依赖的任何值，所以它不会重新评估它的价值。 由于我们将 React 元素存储到其中，这将使这些元素在初始渲染后不会重新渲染，即使传递的值发生变化也是如此。 让我知道这是否有帮助，或者您是否需要更多说明！