React 基础面试题, React JSX 怎么进行内联条件渲染?请举例说明

QA

Step 1

Q:: React JSX 怎么进行内联条件渲染？请举例说明。

A:: 在 React 中，可以通过三元运算符或者逻辑运算符进行内联条件渲染。最常见的方式是使用三元运算符。例如：

 
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

在这个例子中，isLoggedIn 作为条件，如果为 true 则显示 'Welcome back!'，否则显示 'Please log in.'。另一种方式是使用逻辑与运算符：

 
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
}

这种方式只有在 isLoggedIn 为 true 时才会渲染 'Welcome back!'。

Step 2

Q:: 在 JSX 中如何处理多行字符串？

A:: 在 JSX 中处理多行字符串，可以使用模板字符串（Template Literals）。例如：

 
function MyComponent() {
  const multiLineString = `This is a
multi-line string.`;
  return <p>{multiLineString}</p>;
}

模板字符串允许在字符串中直接换行，而不会引起语法错误或需要额外的字符串连接。

Step 3

Q:: React 中的条件渲染和 Vue 的 v-if 有什么区别？

A:: React 中的条件渲染通常使用 JavaScript 语法（例如三元运算符、逻辑与运算符），而 Vue 中的 v-if 指令则是框架自带的指令，专门用于条件渲染。Vue 的 v-if 是一种指令，它会在条件为 false 时完全移除元素，而 React 的条件渲染则是根据表达式的值来决定渲染哪个元素或不渲染任何元素。

Step 4

Q:: 如何在 React 中动态应用 CSS 类？

A:: 在 React 中，可以通过条件运算符或模板字符串来动态应用 CSS 类。例如：

 
function MyComponent({ isActive }) {
  return <div className={isActive ? 'active' : 'inactive'}>Content</div>;
}

或者使用模板字符串：

 
function MyComponent({ isActive }) {
  const className = `box ${isActive ? 'active' : ''}`;
  return <div className={className}>Content</div>;
}

用途

内联条件渲染是 React 中非常常见的操作，尤其在组件需要根据不同状态显示不同 UI 时。例如，在用户是否登录、加载数据是否成功等场景下，开发者经常需要根据不同条件显示不同的内容。面试此类问题可以考察候选人对 JSX 和 JavaScript 的熟悉程度，以及他们在 React 中实现逻辑控制的能力。这些技能在开发交互丰富的应用时非常重要，特别是当应用需要根据实时数据动态更新界面时，合理使用条件渲染可以提升应用的性能和用户体验。\n

相关问题

🦆

如何在 React 中实现列表渲染?▷

在 React 中，可以使用 map() 方法遍历数组并返回一个新的 JSX 元素数组。例如：

 
function MyComponent({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

key 属性对于列表中的每个元素是必须的，它用于标识元素在列表中的唯一性，以帮助 React 进行高效的 DOM 更新。

🦆

React 中的 Fragment 有什么作用?▷

React 中的 Fragment 是一种包裹多个元素的工具，而不在 DOM 中额外创建节点。它用于返回多个元素而不会产生不必要的父元素。例如：

 
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

这里的 <> 是 Fragment 的简写形式，返回的元素不会在 DOM 结构中增加额外的节点。

🦆

如何在 React 中管理组件状态?▷

在 React 中，组件的状态（state）可以通过 useState 钩子来管理。useState 返回一个状态变量和一个更新该状态的函数。例如：

 
import React, { useState } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

每次调用 setCount 都会更新组件的状态并触发重新渲染。

🦆

React 中如何处理组件生命周期?▷

在函数组件中，可以通过 useEffect 钩子来处理组件的生命周期事件。例如，模拟 componentDidMount 和 componentWillUnmount：

 
import React, { useEffect } from 'react';
 
function MyComponent() {
  useEffect(() => {
    // 组件挂载时执行
    console.log('Component mounted');
 
    return () => {
      // 组件卸载时执行
      console.log('Component will unmount');
    };
  }, []);
 
  return <div>My Component</div>;
}

useEffect 中的回调函数会在组件挂载时执行，而返回的函数则会在组件卸载时执行。

相比于原生开发React 框架的优缺点是什么 React 的 keys 是否需要设置为全局唯一为什么