react面试题六 - 技术栈

一、React中如何捕获和处理错误？

在React中，捕获和处理错误是一个重要的部分，以确保应用的健壮性和用户体验。React提供了几种机制来捕获和处理错误，包括错误边界（Error Boundaries）、事件处理器中的try/catch语句、以及React 17中引入的并发模式（Concurrent Mode）下的新特性（尽管后者主要面向未来，目前许多项目可能还未采用）。下面是一些常用的方法：

1. 错误边界（Error Boundaries）

错误边界是一种React组件，它可以捕获其子组件树中JavaScript错误，并打印这些错误到日志中，同时展示一个备用UI。错误边界会捕获渲染过程、生命周期方法以及整个组件树的构造函数中的JavaScript错误。

创建错误边界组件：

jsx 复制代码

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

// 使用方式
<ErrorBoundary>
  <MyComponentThatMightBreak />
</ErrorBoundary>

2. try/catch语句

在事件处理器和异步代码中，你可以使用JavaScript的try/catch语句来捕获和处理错误。

jsx 复制代码

class MyComponent extends React.Component {
  handleClick = () => {
    try {
      // 可能会抛出异常的代码
      const result = someFunctionThatMightThrow();
      console.log(result);
    } catch (error) {
      // 处理错误
      console.error("Caught an error:", error);
    }
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

3. 使用React 17+的并发特性（可选）

React 17及以后版本为并发渲染模式提供了基础，这包括Suspense和Concurrent Mode。虽然这些特性主要用于改善应用的加载和更新性能，但它们也为错误处理提供了新的可能性，如使用Suspense和fallback来优雅地降级渲染等。然而，这些特性主要面向未来，并且需要特定的配置和更复杂的组件结构来实现。

结论

对于大多数React应用来说，错误边界（Error Boundaries）是处理子组件树中JavaScript错误的最直接和有效的方法。而try/catch语句则适用于处理事件处理器或异步代码中的错误。随着React的不断发展，未来的版本可能会提供更多强大的错误处理工具。

二、什么是React的受控组件和非受控组件？

React的受控组件和非受控组件是两种处理表单数据的方式，它们主要区别在于组件的数据是由React状态（state）控制还是由DOM本身控制。

受控组件（Controlled Components）

定义：

受控组件是一种表单管理方式，其值由React组件的状态（state）控制，并通过事件处理器（如onChange）来更新这些值。

特点：

组件的值完全由React状态管理，任何值的改变都需要通过React状态更新来反映。
组件的渲染输出依赖于React状态，状态的改变会触发组件的重新渲染。
由于组件的值受状态控制，因此可以很方便地在事件处理函数中进行验证和处理逻辑。

示例：

在受控组件中，一个文本框的值由React状态控制，当文本框的值发生变化时，会触发onChange事件，该事件通过事件处理器更新React状态，然后组件重新渲染以反映新值。

jsx 复制代码

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

非受控组件（Uncontrolled Components）

定义：

非受控组件的值不由React状态控制，而是由DOM本身管理。这意味着组件的值将直接反映在DOM节点上，而不会触发React状态的更新。

特点：

组件的值由DOM节点直接管理，不受React状态控制。
当需要获取组件的值时，通常需要使用ref（引用）来直接访问DOM节点。
由于组件的值不由React状态控制，因此验证和处理逻辑可能需要更多的DOM操作。

示例：

在非受控组件中，一个文本框的值不由React状态管理，而是直接由DOM节点管理。要获取文本框的值，需要使用ref来访问DOM节点。

jsx 复制代码

class UncontrolledInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick() {
    console.log('Input value:', this.inputRef.current.value);
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

总结

受控组件和非受控组件各有优缺点。受控组件提供了更多的控制和可靠性，但需要编写更多的代码和进行更多的状态管理。非受控组件则提供了更快的更新速度和更少的代码，但可能会难以处理和验证组件的值，并且行为更加不可预测。在开发React应用程序时，应根据具体需求选择使用受控组件还是非受控组件。