当前位置：首页 > React

react如何实现动态页面

2026-03-10 14:01:08React

React 实现动态页面的方法

React 的核心思想是通过组件化和状态管理实现动态页面渲染。以下为几种常见实现方式：

使用 State 管理动态数据

通过 useState Hook 或类组件的 this.state 存储数据，状态变化触发组件重新渲染：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

条件渲染

根据状态值动态显示不同内容：

function UserGreeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

列表动态渲染

使用 map() 方法渲染动态数组：

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

使用 Effect 处理副作用

useEffect 可监听数据变化并执行异步操作：

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => setData(data));
}, [dependencies]);

上下文动态传值

通过 Context API 实现跨组件状态共享：

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar onChangeTheme={setTheme} />
    </ThemeContext.Provider>
  );
}

路由动态加载

使用 React Router 实现动态路由：

<Routes>
  <Route path="/users/:id" element={<UserProfile />} />
  <Route path="/posts/*" element={<PostLayout />} />
</Routes>

代码分割与懒加载

通过 lazy 和 Suspense 实现按需加载：

react如何实现动态页面

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}