javascript - 使用隐藏属性与有条件地渲染组件

Question

我最近发现了一种在 JSX 中有条件地渲染组件的替代方法，即使用 hidden HTML 属性。

例子

function Parent() {
  return {!hideChild && <Child />}
}

对比

function Parent() {
  return <Child hidden={hideChild} />
}

function Child({ hidden }) {
  return (
    <div hidden={hidden} >
      //my content
    </div>
  )
}

到目前为止，在使用hidden 时，我还没有注意到任何性能或类似问题。话虽如此，在隐藏的页面上放置大量 HTML 是否有任何缺点？

对我来说，当我想保留组件状态并具有切换组件 UI 可见性的功能时，这种方法很有效。

这是不好的做法吗？我们应该有条件地渲染组件吗？

Answer 1

不同的是，当使用条件渲染时，如果条件失败，则不会执行条件渲染的 UI 内部的逻辑。

但是使用 hidden 属性会执行逻辑但只会隐藏 UI。

例子:

import React from 'react';

const A = () => {
  console.log('A rendrerd');
  return <h1>A</h1>;
};

const B = ({ hidden }) => {
  console.log('B rendrerd');
  return <h1 hidden={hidden}>B</h1>;
};

const Test = () => {
  return (
    <div>
      {false && <A />}
      <B hidden={true} />
    </div>
  );
};

export default Test;

A 永远不会调用它的 console.log 语句。B 是隐藏的，但它会记录 B rendered。