React 是一个流行的 JavaScript 库，用于构建用户界面和单页应用程序。本教程将深入探讨 React 的高级特性。

高级特性概览

  • 组件生命周期
  • 高阶组件 (HOCs)
  • 渲染优化
  • 上下文 (Context) API
  • 错误边界

组件生命周期

React 组件在其生命周期中经历了几个阶段。以下是一些关键的生命周期方法：

  • componentDidMount(): 组件已挂载到 DOM 上后调用。
  • componentDidUpdate(): 组件更新后调用。
  • componentWillUnmount(): 组件将要卸载时调用。

React Component Lifecycle

高阶组件 (HOCs)

高阶组件是一个接受组件作为参数并返回一个新组件的函数。

const withExtraProps = (WrappedComponent) => {
  return (props) => {
    return <WrappedComponent {...props} extraProp="extra" />;
  };
};

HOC Example

渲染优化

React 提供了一些工具来优化渲染性能，例如 React.memo 和 React.PureComponent。

const MyComponent = React.memo(function MyComponent(props) {
  /* 组件逻辑 */
});

Render Optimization

上下文 (Context) API

上下文 API 允许组件树中的组件跨多层传递数据，而不必通过每个组件手动传递 props。

const MyContext = React.createContext();

function MyComponent() {
  return (
    <MyContext.Provider value="some value">
      {/* 子组件 */}
    </MyContext.Provider>
  );
}

Context API

错误边界

错误边界组件可以捕获其子组件树中发生的 JavaScript 错误，并防止它们导致整个组件树崩溃。

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Error Boundary

扩展阅读

想了解更多关于 React 的信息？请查看我们的 [React 入门教程](/en/technical/tutorials/react basics)。

React 官方文档