当前位置：首页 > React

react 如何渲染

2026-02-25 23:16:42React

渲染基础概念

在React中，渲染是指将组件转换为DOM节点并插入到页面中的过程。React采用虚拟DOM机制优化渲染性能，通过比较虚拟DOM差异实现高效更新。

初始渲染流程

创建React组件后，调用ReactDOM.render()方法触发首次渲染。该方法接收两个参数：要渲染的React元素和挂载的DOM容器。React会递归处理组件树，生成对应的DOM结构。

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello World</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

更新渲染机制

当组件状态或props发生变化时，React会触发重新渲染。通过虚拟DOM比对算法（Reconciliation），仅更新实际发生变化的DOM节点，而非整个组件树。

类组件中使用setState()方法触发更新：

class Counter extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Count: {this.state.count}
      </button>
    );
  }
}

函数组件中使用useState钩子：

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

条件渲染技术

通过JavaScript逻辑运算符实现条件渲染。常用模式包括if语句、三元运算符和逻辑与运算符。

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

// 或使用三元运算符
function Message({ unread }) {
  return (
    <div>
      {unread.length > 0 ? (
        <p>You have {unread.length} unread messages.</p>
      ) : (
        <p>No new messages.</p>
      )}
    </div>
  );
}

列表渲染方法

使用map()函数遍历数组生成元素列表，每个列表项需要分配唯一的key属性以提高渲染性能。

function NumberList({ numbers }) {
  return (
    <ul>
      {numbers.map((number) => (
        <li key={number.id}>{number.value}</li>
      ))}
    </ul>
  );
}

性能优化策略

使用React.memo包裹函数组件避免不必要的渲染，类组件可继承PureComponent或实现shouldComponentUpdate方法。

const MemoComponent = React.memo(function MyComponent(props) {
  /* 仅当props改变时重新渲染 */
});

class OptimizedComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

渲染错误处理

通过错误边界（Error Boundaries）捕获组件渲染过程中的JavaScript错误。使用static getDerivedStateFromError()和componentDidCatch生命周期方法。

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

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

  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }

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

react 如何渲染