react页面如何渲染
渲染 React 页面的核心方法
React 页面的渲染分为初始渲染和更新渲染两个阶段，主要通过虚拟 DOM（Virtual DOM）和协调（Reconciliation）机制实现高效更新。
初始渲染流程
使用 ReactDOM.render() 方法将 React 组件挂载到真实 DOM 节点上。该方法接收三个参数：React 元素、DOM 容器节点和可选的回调函数。
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => <div>Hello React</div>;
ReactDOM.render(<App />, document.getElementById('root'));组件会经历挂载生命周期：constructor() → render() → componentDidMount()。函数组件则通过 useEffect 钩子处理副作用。
更新渲染机制
当组件状态或属性变化时，React 会触发重新渲染。类组件通过 setState() 方法更新状态，函数组件通过 useState 钩子。
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}React 会通过 diff 算法比较新旧虚拟 DOM，计算出最小更新操作，批量应用到真实 DOM 上。
性能优化策略
使用 React.memo 包装函数组件可以避免不必要的重新渲染。对于类组件，可通过实现 shouldComponentUpdate 方法或继承 PureComponent 实现类似效果。
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 使用 props 渲染 */
});对于大型列表，使用 key 属性帮助 React 识别哪些元素发生变化，并配合虚拟化技术如 react-window 减少 DOM 节点数量。
服务端渲染实现
通过 ReactDOMServer.renderToString() 方法在服务器端生成 HTML 字符串，加速首屏加载并改善 SEO。
import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);配合框架如 Next.js 可以简化服务端渲染配置，自动处理路由和数据获取等问题。
