首页-VineWeb

Appearance

React 基础 ​

一: React 的核心概念包括以下几个方面： ​

  1. 组件（Components）：

    • React 是构建用户界面的组件化框架，组件是构建界面的基本单元。
    • 组件可以是函数组件（Functional Components）或类组件（Class Components）。

  2. 虚拟 DOM（Virtual DOM）：

    • React 使用虚拟 DOM 作为中间层，用来描述真实 DOM 的状态。
    • 通过比较前后两个虚拟 DOM 树的差异，React 能够高效地更新真实 DOM。

  3. JSX（JavaScript XML）：

    • JSX 是一种语法扩展，允许在 JavaScript 代码中书写类似于 XML 或 HTML 的结构。
    • JSX 元素被 Babel 转译成对应的 React.createElement 调用。

  4. 单向数据流（One-Way Data Binding）：

    • React 中数据流是单向的，自上而下流动。父组件可以通过 Props 向子组件传递数据，但子组件不能直接修改父组件的数据。
    • 数据的变化通过状态（State）管理，由父组件向下传递至子组件。

  5. 状态（State）和属性（Props）：

    • 组件可以有状态，状态是可变的，通过 setState 方法进行更新。
    • 属性是不可变的，由父组件传递给子组件，并且不能在子组件中直接修改。

  6. 生命周期（Lifecycle）：

    • React 组件具有生命周期方法，包括挂载、更新、卸载等阶段。
    • 生命周期方法允许开发者在组件的不同生命周期阶段执行特定的操作。

  7. 事件处理：

    • React 支持通过事件处理函数来处理用户交互。事件处理函数以驼峰命名的方式绑定到 JSX 元素上。

  8. Hooks：

    • Hooks 是 React 16.8 引入的一项特性，允许函数组件拥有状态和其他 React 特性。
    • 常用的 Hooks 包括 useState、useEffect、useContext 等。

  9. 上下文（Context）：

    • 上下文是 React 提供的一种在组件树中共享值的方式，避免了 Props 的层层传递。
    • 可以使用 React.createContext 和 useContext 来使用上下文。

  10. React Router：

    • React Router 是用于处理在单页面应用中的导航的库，支持声明式的路由配置。

这些核心概念共同构成了 React 的基础，开发者通过理解和运用这些概念，能够更有效地构建可维护和可扩展的 React 应用。

二: React 中的 Virtual DOM 是什么，有什么作用？ ​

Virtual DOM（虚拟 DOM）是 React 中的一种机制，用于提高对真实 DOM 的操作效率。以下是 Virtual DOM 的基本概念和作用：

  1. 概念：

    • 虚拟 DOM 是一个虚拟的树形结构，以 JavaScript 对象的形式表示整个 UI 的状态。
    • 每个虚拟 DOM 节点都对应着真实 DOM 中的一个节点。

  2. 作用：

    • 提高性能： Virtual DOM 的主要目的是减少直接操作真实 DOM 的次数，从而提高性能。
    • 批量操作： React 通过比较前后两个虚拟 DOM 树的差异（称为协调），找出最小化的更新，然后将这些变更一次性批量应用到真实 DOM 中，减少了频繁的 DOM 操作。
    • 跨平台兼容性： 虚拟 DOM 的抽象使得 React 可以在不同平台上运行，不仅限于浏览器环境，也可在服务器端（Node.js）等环境中渲染。

  3. 工作原理：

    • 当组件的状态发生变化时，React 会创建一个新的虚拟 DOM 树。
    • React 使用算法比较前后两个虚拟 DOM 树之间的差异，得到一系列需要更新的操作。
    • 将这些更新操作一次性应用到真实 DOM 中。

  4. React.createElement 和 JSX：

    • React.createElement 函数用于创建虚拟 DOM 元素，而 JSX 语法提供了一种更直观的方式来描述虚拟 DOM 结构。
    • JSX 会被 Babel 转译成对 React.createElement 的调用。
jsx
// 使用 JSX 创建虚拟 DOM 元素
const element = <div className="example">Hello, React!</div>;

// 被转译成 React.createElement 调用
const element = React.createElement('div', { className: 'example' }, 'Hello, React!');

总体而言，Virtual DOM 是 React 中的一项优化策略，通过在 JavaScript 层面进行操作，减少对真实 DOM 的直接操作，从而提高应用的性能和响应速度。

三: React 中的 JSX 是什么，与普通 JavaScript 有什么不同？ ​

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，用于在 React 中声明虚拟 DOM 结构。JSX 可以让 React 组件的结构和逻辑更直观地表达。以下是 JSX 与普通 JavaScript 的一些不同之处：

  1. XML-like 语法：
    • JSX 的语法类似于 XML 或 HTML，允许以标签的形式描述 UI 的结构。这使得组件的结构更直观和易读。
jsx
// JSX 语法
const element = <div className="example">Hello, React!</div>;

// 对应的普通 JavaScript 语法
const element = React.createElement('div', { className: 'example' }, 'Hello, React!');
  1. 类名和样式绑定：
    • 在 JSX 中，可以直接使用 className 表示类名，而不是像普通 HTML 中使用 class。
    • 内联样式可以使用对象的形式，而不是字符串。
jsx
// JSX 中的类名和样式绑定
const element = <div className="example" style={{ color: 'blue' }}>Hello, React!</div>;
  1. JavaScript 表达式：
    • 在 JSX 中，可以在花括号 {} 中使用 JavaScript 表达式，以嵌入动态内容。
jsx
// 在 JSX 中使用 JavaScript 表达式
const name = 'John';
const element = <p>Hello, {name}!</p>;
  1. 组件的使用：
    • 在 JSX 中，可以使用自定义组件，并将其视为一个标签来使用。
jsx
// 在 JSX 中使用自定义组件
const CustomComponent = ({ text }) => <p>{text}</p>;

const element = <CustomComponent text="Hello, JSX!" />;
  1. 不支持 if-else 语句：
    • JSX 中不支持直接使用 if-else 语句。可以使用三元表达式或者将条件判断放在外部。
jsx
// 使用三元表达式
const isLoggedIn = true;
const element = isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>;

// 将条件判断放在外部
let message;
if (isLoggedIn) {
  message = <p>Welcome, User!</p>;
} else {
  message = <p>Please log in.</p>;
}

总的来说，JSX 是一种在 React 中声明虚拟 DOM 结构的语法糖，它简化了组件的书写和理解，并使得 UI 的结构更直观。在编译阶段，JSX 会被转译成对 React.createElement 函数的调用，生成对应的虚拟 DOM 元素。

四: React 中的组件有哪两种类型？它们有什么区别？ ​

在 React 中，组件主要有两种类型：函数组件（Functional Components）和类组件（Class Components）。

  1. 函数组件（Functional Components）：
    • 函数组件是一种使用函数定义的组件。它是纯粹的 JavaScript 函数，接收一些属性（props）作为参数，并返回一个 React 元素。
    • 使用函数组件的语法更简洁，尤其在 React 16.8 引入 Hooks 后，函数组件可以使用状态和其他 React 特性。
jsx
// 函数组件的例子
const FunctionalComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};
  1. 类组件（Class Components）：
    • 类组件是一种使用类定义的组件。它继承自 React.Component 类，可以包含状态（state）和生命周期方法。
    • 在 React 16.3 之前，类组件是唯一支持状态和生命周期的方式，但随着 Hooks 的引入，函数组件也具备了这些能力。
jsx
// 类组件的例子
class ClassComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

区别：

  • 主要区别在于定义方式和特性的支持。函数组件通过函数定义，类组件通过类定义。
  • 在 React 16.8 之前，类组件是唯一支持状态和生命周期的方式，但随着 Hooks 的引入，函数组件也可以拥有状态和生命周期的特性。
  • 函数组件的语法更为简洁，特别是在使用 Hooks 之后。
  • 推荐在新的代码中使用函数组件，除非需要使用类组件特有的生命周期或其他特性。

在现代 React 应用中，函数组件通常是首选，因为它们更易于理解、测试和维护，而且具备与类组件相近的功能。

五: 什么是状态（State）和属性（Props），它们之间有什么区别？ ​

在 React 中，状态（State）和属性（Props）是两个关键概念，用于组件之间的数据传递和管理。

  1. 属性（Props）：
    • 属性是组件从父组件接收的数据。父组件通过属性将数据传递给子组件，子组件通过 props 对象来访问这些属性。
    • 属性是不可变的，子组件不能直接修改从父组件接收到的属性。它们被用于从父组件向子组件传递信息。
jsx
// 父组件
const ParentComponent = () => {
  return <ChildComponent name="John" />;
};

// 子组件
const ChildComponent = (props) => {
  return <p>Hello, {props.name}!</p>;
};
  1. 状态（State）：
    • 状态是组件自身管理的数据，它可以随着时间的推移而发生变化。只有类组件才能拥有状态，因为函数组件之前没有 Hooks 的引入是无状态的。
    • 使用 setState 方法来更新状态，并且状态的更新是异步的。
    • 状态应该尽量简洁，包含组件自身的数据，而不是外部数据。
jsx
// 类组件中的状态
class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

区别：

  • Props：

    • 由父组件传递给子组件。
    • 不可变，子组件不能直接修改。
    • 用于从父组件向子组件传递信息。

  • State：

    • 组件自身管理的数据。
    • 可以随时间推移而变化。
    • 通过 setState 方法更新。

在实际开发中，状态和属性的合理使用是 React 组件设计的关键。属性用于传递数据，状态用于管理组件的内部状态。属性和状态的清晰划分有助于提高组件的可维护性和可复用性。

六: React 中的生命周期钩子有哪些，分别在什么时候触发？ ​

在 React 类组件中，生命周期钩子是一些特殊的方法，它们在组件的不同阶段被调用，允许开发者执行特定的操作。React 16.3 版本之前的生命周期分为三个阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。React 16.3 版本引入了新的生命周期方法，并废弃了一些旧的生命周期方法。以下是常见的生命周期钩子：

挂载阶段（Mounting）:

  1. constructor()：

    • 在组件被创建时调用。
    • 用于初始化组件的状态和绑定事件处理方法。

  2. static getDerivedStateFromProps()：

    • 在组件创建时和更新时都会调用。
    • 用于根据新的属性计算并返回状态。

  3. render()：

    • 渲染方法，必须实现。
    • 返回用于渲染的 React 元素。

  4. componentDidMount()：

    • 在组件被插入到 DOM 后调用。
    • 适合执行网络请求、订阅事件等副作用。

更新阶段（Updating）:

  1. static getDerivedStateFromProps()：

    • 在更新时也会调用。
    • 用于根据新的属性计算并返回状态。

  2. shouldComponentUpdate()：

    • 在更新前调用，用于控制组件是否重新渲染。
    • 返回 true 表示重新渲染，返回 false 表示阻止重新渲染。

  3. render()：

    • 渲染方法，必须实现。
    • 返回用于渲染的 React 元素。

  4. getSnapshotBeforeUpdate()：

    • 在最近一次渲染输出（提交到 DOM 前）之前调用。
    • 返回值将作为第三个参数传递给 componentDidUpdate。

  5. componentDidUpdate()：

    • 在组件更新后调用。
    • 适合执行更新后的 DOM 操作。

卸载阶段（Unmounting）:

  1. componentWillUnmount()：
    • 在组件即将被卸载时调用。
    • 适合执行清理操作，如取消网络请求、清除定时器等。

React 16.3 之后的新生命周期方法:

  1. static getDerivedStateFromError()：

    • 在子组件抛出错误后被调用。
    • 用于捕获并更新状态以渲染降级 UI。

  2. componentDidCatch()：

    • 在子组件抛出错误后、渲染降级 UI 之后调用。
    • 适合记录错误信息、发送错误报告等。

以上生命周期方法中，有一些在 React 16.3 之后被废弃，因此在新的项目中建议使用新的生命周期方法。不同的生命周期方法提供了执行特定操作的时机，开发者可以根据需要选择合适的生命周期方法。

七: React 中如何实现组件间的通信？ ​

在 React 中，组件间的通信可以通过属性传递和状态管理来实现。以下是一些常见的组件通信方式：

  1. 属性传递（Props）：
    • 父组件可以通过属性将数据传递给子组件，子组件通过 props 对象来访问这些属性。
jsx
// 父组件
const ParentComponent = () => {
  const data = "Hello from parent!";
  return <ChildComponent message={data} />;
};

// 子组件
const ChildComponent = (props) => {
  return <p>{props.message}</p>;
};
  1. 状态提升：
    • 如果多个组件需要共享同一份数据，可以将该数据的状态提升到它们的最近共同的父组件中。
jsx
// 共同的父组件
class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      sharedData: "Shared data!",
    };
  }

  render() {
    return (
      <div>
        <ChildComponent data={this.state.sharedData} />
        <AnotherChildComponent data={this.state.sharedData} />
      </div>
    );
  }
}
  1. 回调函数：
    • 父组件可以通过回调函数将函数传递给子组件，子组件在需要时调用该函数与父组件通信。
jsx
// 父组件
const ParentComponent = () => {
  const handleChildClick = () => {
    console.log("Child clicked!");
  };

  return <ChildComponent onClick={handleChildClick} />;
};

// 子组件
const ChildComponent = (props) => {
  return <button onClick={props.onClick}>Click me</button>;
};
  1. Context API：
    • React 提供了 Context API，它允许在组件树中共享值，避免了逐层传递属性的麻烦。
jsx
// 创建 Context
const MyContext = React.createContext();

// 提供 Context 的父组件
const ParentComponent = () => {
  const sharedValue = "Shared value!";
  return (
    <MyContext.Provider value={sharedValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 子组件中消费 Context
const ChildComponent = () => {
  return (
    <MyContext.Consumer>
      {(value) => <p>{value}</p>}
    </MyContext.Consumer>
  );
};

上述方法的选择取决于具体的场景和需求。属性传递适用于简单的数据传递，状态提升适用于多个组件需要共享数据的情况，回调函数适用于在子组件触发某些事件时通知父组件，而 Context API 则适用于跨越多层组件传递共享的全局数据。

Email: vineweb@163.com