chevron_left

React 实践教程

免费
第 4.10 回

教程文档

React 实践教程 - 自定义行为

2023年12月20日
React 实践教程

自定义行为

说明

当我们筛选列表,然后单击链接,请注意:列表不再被过滤。搜索参数从<input>URL 中清除。如果保持列表过滤,并保持在网址中的参数。

修改 src/routes/invoices.js

import { useLocation, NavLink } from "react-router-dom";

function QueryNavLink({ to, ...props }) {
  let location = useLocation();
  return <NavLink to={to + location.search} {...props} />;
}

然后将<NavLink>改为 <QueryNavLink>

c7a3fae0-f42d-41ed-ab86-eab3edba5265.png

useL...

课程介绍

「长乐未央」出品的 React 开发教程。

React 是用于构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大,从最早的 UI 引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI,就能同时运行在服务器、浏览器和手机。

React 主要用于构建 UI。你可以在 React 里传递多种类型的参数,如声明代码,帮助你渲染出 UI、也可以是静态的 HTML DOM 元素、也可以传递动态变量、甚至是可交互的应用组件。

  1. 声明式设计:React 采用声明范式,可以轻松描述应用。
  2. 高效:React 通过对 DOM 的模拟,最大限度地减少与 DOM 的交互。
  3. 灵活:React 可以与已知的库或框架很好地配合。

适合这样的人

有一定开发基础,最好之前学过Vue的同学