面试题：React中三元运算符条件渲染的常见场景及优化

Question

在React应用中，经常会使用三元运算符进行条件渲染。请举例说明至少两个使用三元运算符进行条件渲染的常见场景，并阐述在这些场景下如何优化渲染性能以避免不必要的重新渲染。

Answer 1

场景一：根据用户登录状态显示不同内容

1. 示例代码：

import React from'react';

const App = () => {
  const isLoggedIn = true; // 假设用户已登录
  return (
    <div>
      {isLoggedIn? (
        <p>欢迎，用户！</p>
      ) : (
        <p>请登录。</p>
      )}
    </div>
  );
};

export default App;

2. 性能优化：
   • 使用 React.memo 包裹组件。对于上述简单组件，将 App 组件用 React.memo 包裹，React.memo 会对 props 进行浅比较，如果 props 没有变化，组件将不会重新渲染。例如：

import React from'react';

const App = React.memo(() => {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn? (
        <p>欢迎，用户！</p>
      ) : (
        <p>请登录。</p>
      )}
    </div>
  );
});

export default App;

- 如果 `isLoggedIn` 状态变化频率较高，可以考虑使用 `useMemo` 来缓存渲染结果。例如：

import React, { useMemo } from'react';

const App = () => {
  const isLoggedIn = true;
  const renderContent = useMemo(() => {
    return isLoggedIn? (
      <p>欢迎，用户！</p>
    ) : (
      <p>请登录。</p>
    );
  }, [isLoggedIn]);
  return (
    <div>
      {renderContent}
    </div>
  );
};

export default App;

场景二：根据组件状态显示加载指示器

1. 示例代码：

import React, { useState } from'react';

const LoadingComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  return (
    <div>
      {isLoading? (
        <p>加载中...</p>
      ) : (
        <p>加载完成。</p>
      )}
    </div>
  );
};

export default LoadingComponent;

2. 性能优化：
   • 同样可以使用 React.memo 包裹 LoadingComponent 组件。

import React, { useState } from'react';

const LoadingComponent = React.memo(() => {
  const [isLoading, setIsLoading] = useState(true);
  return (
    <div>
      {isLoading? (
        <p>加载中...</p>
      ) : (
        <p>加载完成。</p>
      )}
    </div>
  );
});

export default LoadingComponent;

- 如果 `isLoading` 依赖于某个复杂计算或异步操作结果，可以用 `useMemo` 缓存计算结果，减少不必要的重新渲染。例如，假设 `isLoading` 依赖于一个复杂函数 `calculateLoadingStatus`：

import React, { useState, useMemo } from'react';

const calculateLoadingStatus = () => {
  // 复杂计算逻辑
  return true;
};

const LoadingComponent = () => {
  const isLoading = useMemo(() => calculateLoadingStatus(), []);
  return (
    <div>
      {isLoading? (
        <p>加载中...</p>
      ) : (
        <p>加载完成。</p>
      )}
    </div>
  );
};

export default LoadingComponent;