react如何实现动态页面
React 实现动态页面的方法
使用状态管理（State）
React 的核心特性之一是状态管理，通过 useState Hook 或类组件的 this.state 可以实现动态数据绑定。状态变化会自动触发组件重新渲染，从而实现页面动态更新。
import React, { useState } from 'react';
function DynamicContent() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数: {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}数据驱动渲染
动态页面通常依赖外部数据（如 API 返回）。通过 useEffect Hook 获取数据并更新状态，可以动态渲染内容。
import React, { useState, useEffect } from 'react';
function DataDrivenPage() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}条件渲染
根据状态或属性动态显示不同内容，使用条件语句（如 if 或三元运算符）控制渲染逻辑。
function ConditionalRender({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <p>欢迎回来</p> : <button>登录</button>}
</div>
);
}动态路由
结合 react-router-dom 实现基于 URL 的动态页面切换。通过路由参数加载不同数据或组件。
import { BrowserRouter as Router, Route, useParams } from 'react-router-dom';
function ProductPage() {
const { id } = useParams();
const [product, setProduct] = useState(null);
useEffect(() => {
fetch(`https://api.example.com/products/${id}`)
.then(res => res.json())
.then(data => setProduct(data));
}, [id]);
return product ? <div>{product.name}</div> : <p>加载中...</p>;
}
function App() {
return (
<Router>
<Route path="/product/:id" component={ProductPage} />
</Router>
);
}全局状态管理
对于跨组件的动态数据，使用 Context API 或 Redux 管理全局状态，确保多组件同步更新。
const ThemeContext = React.createContext();
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
切换主题
</button>
);
}动态样式
根据状态动态修改样式或类名，实现视觉交互效果。
function DynamicStyle() {
const [active, setActive] = useState(false);
return (
<div
style={{ color: active ? 'red' : 'black' }}
className={active ? 'active' : ''}
onClick={() => setActive(!active)}
>
点击切换样式
</div>
);
}
