我对使用 React Router 和常规条件渲染方法之间的核心差异(尤其是关于性能)感到困惑。 我的意思是“常规条件渲染方法”,例如:
我们可以在父组件中设置一个状态,并将其作为子组件的 props 传递, 我们根据要求有条件地更新此类状态,子组件将根据其 Prop 重新呈现不同的内容。
我认为它可以实现与使用 React Router 完全相同的目标,那么为什么我们还需要 React router?使用 React Router 会带来更好的性能体验还是什么(假设我们不需要历史功能)?
最佳答案
React Router 本身使用条件渲染,并且完全可以用条件渲染替换它的功能。您不必使用它,据我所知,没有普遍的论据可以证明为什么它比您自己的条件渲染更高效。
使用 React Router 的原因是因为它允许您以声明方式表达您的路由。应用程序通常有多个逻辑 View 或路由,您可以在代码中有条件地选择在给定时间显示哪个,但随着可能 View 数量的增加,此逻辑会变得复杂,许多开发人员发现它更易于管理通过以声明性语法表达 View 来增加 View ,这是 React Router 提供的核心功能。
例如,考虑以下使用条件渲染的示例(根据 React 路由器指南修改):
class BasicExample extends React.Component {
constructor() {
super();
this.state = { currentView: "home" };
}
render() {
const currentView = this.state.currentView;
return (
<div>
<ul>
<li onClick={() => this.setState({ currentView: "home" })}>Home</li>
<li onClick={() => this.setState({ currentView: "about" })}>About</li>
<li onClick={() => this.setState({ currentView: "topics" })}>
Topics
</li>
</ul>
{currentView === "home" && <Home />}
{currentView === "about" && <About />}
{currentView === "topics" && <Topics />}
</div>
);
}
}
使用路由器的诗句:
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
在第一种情况下,你将内部状态引入你的组件,你需要将回调传递给任何想要更改当前 View 的 child ,没有明确的方法来处理分层路由,如果你得到一个意想不到的 currentView
值由您来处理,并且可以说后一个示例更易于阅读。另一方面,第一个例子是有争议的更明显,并且使用 React Router 库更灵活。与任何事情一样,这是您需要在您尝试解决的问题的背景下进行评估的权衡。
此外,通常希望将某些东西与逻辑 View 的概念相结合,例如,您可能希望更改浏览器 url、维护 View 历史记录或通过状态容器管理当前逻辑 View ,这些是 React Router 帮助促进的所有功能
关于javascript - React Router VS 条件渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51181580/