开发者的工具库

使用HTML标记的字符串

在浏览器的原生 DOM 编程中，可以使用 innerHTML 属性将一个包含 HTML 标记的字符串插入到特定的 DOM 元素中。

在 React 中，也提供了一种类似的功能，即 dangerouslySetInnerHTML 属性。这个属性允许将包含 HTML 标记的字符串插入到 React 组件中，并将其作为原始 HTML 渲染出来。但需要注意的是，使用 dangerouslySetInnerHTML 带来了潜在的安全风险，因为绕过了 React 的默认属性转义和防御机制，可能会导致跨站脚本攻击（XSS）等问题。

function MyApp() {
  return <div dangerouslySetInnerHTML={{
    __html: 'First &middot; Second'
  }} />
}

实现SSR

React 已经配备了用于处理 Node 服务器上页面渲染的功能，可以通过使用特殊版本的 DOM 渲染器。

import ReactDOMServer from 'react-dom/server'
import App from './App'

ReactDOMServer.renderToString(<App />)

此方法将以字符串形式输出常规 HTML，然后将其作为服务器响应的一部分放在页面正文中。

严格模式

React.StrictMode 是一个有用的组件，用于突出显示应用程序中的潜在问题，这些检查仅适用于开发模式。

return (
  <React.StrictMode>
    <>
      <ComponentOne />
      <ComponentTwo />
    </>
  </React.StrictMode>
)

强制渲染

可以通过调用 forceUpdate() 来告诉 React，当前组件需要重新渲染。

component.forceUpdate(callback)

触发点击事件

在 render 方法中创建一个 ref

<input ref={input => this.inputRef = input} />

在事件处理器中触发点击事件

this.inputRef.click()

错误边界

React 中的一种组件，用于捕获并处理子组件中的 JavaScript 错误。

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

  static getDerivedStateFromError(error) {
    // 更新状态使下一次渲染可以显示备用 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可以在此处记录错误信息
    console.error("Error:", error);
    console.error("Error Info:", errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 显示备用 UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
};

将需要进行错误捕获的子组件包裹在 ErrorBoundary 组件中

<ErrorBoundary>
  <MyApp />
</ErrorBoundary>

使用Web Components

index.tsx

import React from 'react';
import '@vaadin/vaadin-date-picker';

class MyApp extends React.Component {
  render() {
    return (
      <div>
        <vaadin-date-picker label="When were you born?"></vaadin-date-picker>
      </div>
    );
  }
};

export default MyApp;

动态导入

动态导入语法是 ECMAScript 提案，可以使用动态导入来实现代码拆分。

import("./math").then(math => {
  console.log(math.add(10, 20));
});