当前位置：首页 > React

react如何动态渲染

2026-01-24 03:44:52React

动态渲染的基本方法

React中动态渲染的核心是通过状态（state）和属性（props）控制组件的输出。使用useState或useReducer管理状态，当状态变化时组件会自动重新渲染。

const [items, setItems] = useState([]);

return (
  <div>
    {items.map(item => <div key={item.id}>{item.text}</div>)}
  </div>
);

条件渲染模式

通过逻辑运算符或三元表达式实现条件渲染。适用于需要根据不同状态显示不同UI的场景。

{isLoading ? <Spinner /> : <Content data={data} />}

{hasError && <ErrorModal message={errorMessage} />}

列表动态渲染

使用数组的map方法动态生成列表元素，注意每个子元素必须具有唯一的key属性以提高渲染性能。

const todoList = todos.map(todo => (
  <li key={todo.id}>
    {todo.text}
    <button onClick={() => removeTodo(todo.id)}>Delete</button>
  </li>
));

高阶组件模式

通过高阶组件（HOC）实现动态渲染逻辑复用。将组件作为参数传入，返回增强后的新组件。

function withDynamicData(WrappedComponent) {
  return function(props) {
    const [data, setData] = useState(null);
    useEffect(() => { fetchData().then(setData); }, []);
    return data ? <WrappedComponent {...props} data={data} /> : <Loading />;
  };
}

渲染属性模式

使用children prop或特定render prop来动态决定渲染内容。适用于需要灵活注入渲染逻辑的场景。

<DataProvider render={data => (
  <Chart data={data} />
)} />

动态组件切换

通过组件状态动态切换渲染的组件类型。常用于标签页、路由等场景。

const [currentTab, setCurrentTab] = useState('home');
const components = {
  home: <Home />,
  profile: <Profile />,
  settings: <Settings />
};

return (
  <div>
    {components[currentTab]}
  </div>
);

上下文动态渲染

利用React Context API实现跨组件层的动态渲染。当上下文值变化时，所有消费该上下文的组件都会重新渲染。

react如何动态渲染

const ThemeContext = createContext('light');

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