当前位置：首页 > React

react中如何渲染dom

2026-03-31 12:36:40React

渲染 DOM 的方法

在 React 中，渲染 DOM 的核心是通过 ReactDOM.render() 方法将 React 元素挂载到指定的 DOM 节点上。以下是具体实现方式：

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

const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

使用组件渲染

React 支持将组件作为渲染目标，组件可以是函数组件或类组件：

function Greeting() {
  return <h1>Hello, React Component!</h1>;
}

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

条件渲染

通过逻辑控制动态渲染内容，常见方式包括三元表达式或 && 短路运算：

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
ReactDOM.render(element, document.getElementById('root'));

列表渲染

使用 map() 方法渲染数组数据，需为每个列表项分配唯一的 key：

const numbers = [1, 2, 3];
const listItems = numbers.map((number) => 
  <li key={number.toString()}>{number}</li>
);
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

使用 Fragments

渲染多个相邻元素时，可通过 <React.Fragment> 包裹避免额外 DOM 节点：

const element = (
  <React.Fragment>
    <td>Column 1</td>
    <td>Column 2</td>
  </React.Fragment>
);
ReactDOM.render(element, document.getElementById('root'));

动态更新 DOM

React 会自动处理 DOM 更新，只需修改状态或属性即可触发重新渲染：

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return <h1>Current time: {time.toLocaleTimeString()}</h1>;
}

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

使用 Portal 渲染

将子节点渲染到父组件 DOM 层次结构之外的节点，适用于模态框等场景：

react中如何渲染dom

function Modal() {
  return ReactDOM.createPortal(
    <div className="modal">Modal Content</div>,
    document.getElementById('modal-root')
  );
}

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