React 基础面试题, 如何有条件地渲染 React 组件?
React 基础面试题, 如何有条件地渲染 React 组件?
QA
Step 1
Q:: 如何有条件地渲染 React 组件？
A:: 在 React 中，可以使用 JavaScript 中的条件运算符（如 if...else 语句、三元运算符）或逻辑运算符（如 &&）来有条件地渲染组件。例如，可以通过三元运算符 condition ? <ComponentA /> : <ComponentB /> 来决定渲染哪个组件；或者通过逻辑 AND 运算符 condition && <ComponentA /> 来根据条件决定是否渲染组件。
Step 2
Q:: 什么是 JSX？如何在 JSX 中使用条件渲染？
A:: JSX 是 JavaScript 的一种语法扩展，允许你在 JavaScript 中直接编写类似 HTML 的代码。在 JSX 中，条件渲染可以通过使用 JavaScript 表达式来实现，这些表达式可以嵌入到 JSX 中。例如，可以使用 { condition ? <ComponentA /> : <ComponentB /> } 来进行条件渲染。
Step 3
Q:: 如何在 React 中实现元素的动态显示/隐藏？
A:: 可以通过条件渲染来动态显示或隐藏元素。具体而言，可以使用三元运算符或逻辑运算符根据某个状态值来决定是否渲染某个元素。例如，如果想要基于某个状态值来显示或隐藏一个按钮，可以使用 {this.state.isVisible && <button>Click Me</button>}，其中 isVisible 是状态值。
Step 4
Q:: 如何避免 React 中的过度渲染？
A:: 避免过度渲染可以通过以下几种方法：使用 React.memo 来防止函数组件的无意义更新，使用 shouldComponentUpdate 在类组件中进行优化，使用 useMemo 或 useCallback 来缓存计算结果或函数。这样可以减少不必要的重新渲染，从而提升性能。
Step 5
Q:: 在条件渲染时，如何处理 React 中的短路评估（Short-Circuit Evaluation）？
A:: 短路评估是 React 中常用的技巧。通过使用逻辑 AND 运算符 &&，可以根据条件来有条件地渲染某个组件。例如，condition && <Component /> 表示如果条件为真，则渲染 <Component />，否则什么都不渲染。这种方式通常用于简单的条件渲染中。