React节点类型

在React中，节点（Node）是构成React应用界面的基本单元。

1. 元素节点（React Element）

• 表示UI中的单个节点，是React的基础组成部分。
• 类型 HTML元素节点：普通的DOM元素（如<div>、<span>） 自定义组件：用户定义的组件（如）

const element = <div>Hello, World!</div>;
const customElement = <MyComponent />;

2. 文本节点（Text）

文本内容节点，React会将其转化为虚拟DOM的文本节点。

const text = "Hello, World!";
const element = <div>{text}</div>;    

3. FiberNode

React内部使用的节点类型，用于Fiber架构中。Fiber架构是React 16引入的一个重要特性，用于优化渲染性能。FiberNode在Diff阶段通过ReactElement生成，组成Fiber树的最小节点，用于描述DOM。

4. Fragment节点

不产生实际DOM的节点，用于返回多个子节点。

const fragment = (
  <>
    <div>Child 1</div>
    <div>Child 2</div>
  </>
);

5. Portal节点

用于将子元素渲染到DOM树中的指定位置，而非父组件的DOM层次结构中。

import ReactDOM from 'react-dom';

const portal = ReactDOM.createPortal(
  <div>Portal Content</div>,
  document.getElementById('portal-root')
);

6. Suspense节点

用于处理异步加载组件

const suspenseNode = (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

7.Context节点

React的Context提供跨组件的状态共享。

const MyContext = React.createContext();

const contextNode = (
  <MyContext.Provider value={{ data: 'example' }}>
    <MyComponent />
  </MyContext.Provider>
);

8.数组节点

返回多个节点的数组，通常用于列表渲染。

const arrayNode = [
  <div key="1">Child 1</div>,
  <div key="2">Child 2</div>
];

9.错误边界

捕获子组件中错误的特殊类组件

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error, info) {
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <div>Error occurred!</div>;
    }
    return this.props.children;
  }
}

const errorBoundaryNode = (
  <ErrorBoundary>
    <MyComponent />
  </ErrorBoundary>
);