Maison > Questions et réponses > le corps du texte
Je veux le restituer chaque fois que j'ai un News
组件,它需要一些道具,并且每当我单击 <Link />
et l'accessoire de classe correspondant. Il met à jour l'URL mais ne restitue pas le composant.
<Routes> <Route path="/" element={ <News country={this.country} apiKey={this.API_KEY} pageSize={this.pageSize} category="general" /> } /> <Route path="/business" element={ <News country={this.country} apiKey={this.API_KEY} pageSize={this.pageSize} category="business" /> } /> <Route path="/entertainment" element={ <News country={this.country} apiKey={this.API_KEY} pageSize={this.pageSize} category="business" /> } /> </Routes>
Ce sont les miens <NavLink />
<li className="nav-item"> <NavLink className="nav-link" aria-current="page" to="/"> Home </NavLink> </li> {this.props.categories.map((category) => { return ( <li key={category} className="nav-item"> <NavLink to={`/${category}`} className="nav-link"> {category[0].toUpperCase() + category.slice(1, category.length)} </NavLink> </li> ); })}
P粉4768839862024-03-27 12:51:14
Nous pouvons simplement restituer element
组件中添加一个唯一的 key
。每次都会用一些不同的 props
endcphpcn dans .
} />
P粉2427419212024-03-27 10:45:53
react-router
/react-router-dom
通过保持安装相同的组件实例来优化渲染,即使它在多个路由上渲染。这是一种性能优化,可以节省卸载和重新安装同一组件的过程,而只是为了向其传递不同的 props 值。换句话说,即使路由发生变化,组件仍保持挂载状态,并且应该在 componentDidUpdate
生命周期方法或 useEffect
Gérez les mises à jour de la valeur des accessoires de dépendance dans les hooks.
En fonction de l'itinéraire et des accessoires passés, cet accessoire News
组件确实对 category
a certaines dépendances, car c'est le seul accessoire que je vois qui est différent.
News
组件可能应该有一个 useEffect
钩子,并依赖于此 category
propriété pour exécuter/charger des données différentes en fonction de cette valeur de propriété différente.
Exemple :
const News = ({ apiKey, category, country, pageSize }) => { useEffect(() => { // a dependency value changed, rerun some logic }, [apiKey, category, country, pageSize]); ... };Méthode
if News
是一个基于 React 类的组件,那么它应该实现 componentDidUpdate
.
class News extends React.Component { ... componentDidUpdate(prevProps) { const { apiKey, category, country, pageSize } = this.props; if ( category !== prevProps.category /* || other props change conditions */ ) { // a dependency value changed, rerun some logic } } ... };
De plus, sur cette base, grâce à category
和 URL 路径似乎也匹配,在大多数情况下,您还可以通过使用以下命令渲染单个路由来使代码更加干燥:类别作为路由路径参数,并应用相同的 useEffect
la logique de hook pour réexécuter la logique qui dépend des valeurs de la catégorie.
Exemple :
} />
import { useParams } from 'react-router-dom'; const News = ({ apiKey, country, pageSize }) => { const { category = "general" } = useParams(); useEffect(() => { // a dependency value changed, rerun some logic }, [apiKey, category, country, pageSize]); ... };
De même si les paramètres du chemin d'itinéraire News
是类组件,则使用适当的 componentDidUpdate
生命周期方法并实现自定义 withRouter
高阶组件,以便将 category
sont injectés comme accessoires.
L'utilisation des clés React News
sur composants ne doit être utilisée qu'en dernier recours car elle implique un démontage réel, comme le démontage et le remontage du composant, ce qui nécessite plus de travail que le simple rendu du composant avec des valeurs d'accessoires mises à jour.