const App = () => {
  const [isShow, setShow] = useState(false);
  
  return (
    <div>
      {isShow && <div>显示内容</div>}
    </div>
  );
};

console.log(true && "显示文本");  // 输出: "显示文本"
console.log(false && "显示文本"); // 输出: false

// 测试不同类型在JSX中的渲染表现
const RenderTest = () => (
  <>
    {true}          {/* 不显示 */}
    {false}         {/* 不显示 */}
    {null}          {/* 不显示 */}
    {undefined}     {/* 不显示 */}
    {0}             {/* 显示: 0 */}
    {""}            {/* 显示: 空 */}
    {"false"}       {/* 显示: "false" */}
  </>
);

function reconcileChildFibers(/* ... */) {
  // 处理对象类型（组件、dom元素等）
  if (typeof newChild === 'object' && newChild !== null) {
    // 创建对应Fiber节点
  }
  // 处理文本和数字
  else if (typeof newChild === 'string' || typeof newChild === 'number') {
    // 创建文本节点
  }
  // 过滤特殊值
  else {
    // 跳过boolean/null/undefined
    return null;
  }
}

{items.length && <List items={items} />}

// 明确布尔转换
{items.length > 0 && <List items={items} />}

// 使用三元表达式
{items.length ? <List items={items} /> : null}

{data.hasPermission && <AdminPanel />}

// 严格类型检查
{data.hasPermission === true && <AdminPanel />}

// 转换为布尔值
{!!data.hasPermission && <AdminPanel />}

// 三元表达式（简单分支）
{isLoading ? <Spinner /> : <Content />}

// IIFE复杂逻辑
{(() => {
  if (error) return <ErrorView />;
  if (isEmpty) return <EmptyState />;
  return <DataList />;
})()}

// 组件封装
const ConditionalRender = ({ condition, children }) => 
  condition ? children : null;

<ConditionalRender condition={isValid}>
  <FormSection />
</ConditionalRender>

// 安全使用（左侧确保为布尔值）
{isVisible && <Popup />}

// 与可选链结合
{data?.user?.isAdmin && <AdminTools />}

// 避免不必要的计算
{shouldRender && heavyComponent()}

// 改为：
{shouldRender ? heavyComponent() : null}

const RenderProxy = ({ when, children }) => when ? children : null;

<RenderProxy when={status === 'success'}>
  <SuccessView />
</RenderProxy>

const DataRenderer = ({ data }) => {
  if (!data) return <LoadingIndicator />;
  if (data.error) return <ErrorDisplay />;
  if (data.items.length === 0) return <EmptyState />;
  
  return <DataList items={data.items} />;
};

const withCondition = (conditionFn) => (Component) => (props) =>
  conditionFn(props) ? <Component {...props} /> : null;

const AdminOnlyView = withCondition(
  props => props.user.role === 'admin'
)(AdminPanel);

Warning: Booleans are not valid as a React child...

// 转换前
{isValid && <Content />}

// 转换后（简化）
isValid ? React.createElement(Content) : null