react面试题六

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

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

1. 错误边界（Error Boundaries）

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

创建错误边界组件：

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 更新 state 使下一次渲染能够显示降级后的 UIreturn { 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语句来捕获和处理错误。

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状态，然后组件重新渲染以反映新值。

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节点。

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>);}
}