React 中使用 AntV G6

G6 V310  Github:  >

使用官方的教学项目

安装 react-router 依赖

react-router-dom是浏览器端的基于react-router库的库，所以装了这个以后就不用再手动装react-router了

修改Appjs和 indexjs到简单的样子

然后启动项目,然后我们可以在基础上修改了。

连接你的app到浏览器的URL。

用BrowserRouter包裹在你的App的外面

在 src/Appjs 里添加一些链接和全局导航。

现在点击那些链接，你会发现地址栏会发生改变，也可以用前进后退在历史记录中移动

接下来我们需要在indexjs里面创建路由配置告诉app如何渲染不同的url

我们注意到点击链接的时候，App中的布局消失了。只剩下Expenses或Invoices这两个路由指向的内容

嵌套路由的作用就是共享部分UI

我们需要两步 *** 作实现这一点

首先indexjs里面对路由进行嵌套。这样两个组件就变成了App组件的子节点

当路由拥有子节点的时候会发生两件事

接下来我们在Appjsx添加一个Outlet作为渲染子节点路由的地方

这下我们就可以在两个路由间切换保持共享的布局了。

我们模拟真实使用场景，给Invoices路由造点假数据

然后我们修改invoicesjsx组件，获取并且渲染数据

我们可以发现，当我们输入一个没有分配地址的路由的时候，会显示空白页。

实际上有一个好办法就是把这些不匹配的路由都导入一个404页面。

我们添加一个""路由，这个路由会匹配所有没有匹配其他路由的路由

下面我们添加一些新组件，用于显示固定年份的invoice

然后我们在invoices路由下面添加这个子路由

我们刚刚创建的路由是匹配 "/invoices/2005" and "/invoices/1998"这种格式的。

然后我们还需要在invoicesjsx 添加一个outlet，不然显示不出来子路由的内容

然后我们在invoicejsx 文件中获取url参数

接着我们在datajs里面添加一个根据年份返回对应年份数据的函数

然后我们就能用这个函数获取数据并且渲染出来了。

这可能是react router 里面最难理解的概念。

当我们浏览 invoices 路由的子路由内容，之后我们点击invoices路由的链接，我们发现右侧变成了空白。

我们可以添加一个index路由解决这个问题

接下来我们发现点击invoices路由的时候会默认显示index路由的内容而不是空白。

index路由和其他路由不同的地方是它没有path属性，他和父路由共享同一个路径。

下面几点可以帮助你理解这个概念

通常我们需要，特别是在导航列表里面，需要展示给用户当前激活的链接是哪个。

西面我们把invoicesjsx中的Link换成NavLink

我们做了以下3件事

我们也可以利用className做到一样的效果。

搜索参数就类似于url参数，但是他们在url中所处的位置不同。

不是由 / 分隔，他们出现在一个 之后，类似于这样的形式 "/loginsuccess=1" or "/shoesbrand=nike&sort=asc&sortby=price

react router 提供了 useSearchParams 用于读取和 *** 作搜索参数。它有点像useState，不同点是useState是 *** 作内存中的数据，

而他是设置url 搜索参数中的state

接着上一节的程序，

我们发现如果我们点击了过滤出来的链接，就不会保持过滤了，input会被清空。

我们能够在点击新链接的时候保持查询字符串，只要我们组合 Navlink和useLocation,组成一个我们自己的QueryNavLink

类似于 useSearchParams , useLocation 也会返回一个location告诉我们一些信息。就类似于下面的格式

有时我们需要更改URL，

我们添加一个按钮，将invoice删除，然后导航到索引路由。

首先我们在datajs里添加下面用于删除一个invoice的函数

然后我们添加删除按钮

hooks作为react168推出的特性，现已经被广泛应用以替代class组件，犹记得在上一个react项目中被我们家后台喷"使用react而不用hooks，项目就是个垃圾"

因此在新项目中，刻意向hooks的写法上转变，先看下我的组件的效果图

当前组件 有两部分组成：面包屑和表格

逻辑说明：每次的表格 *** 作实际上是新增一条面包屑导航，而table则作为公共的组件每次导航改变后改变其column和data。为了避免层级过深面包屑数组对象传递过于繁琐，故将面包屑的数组对象保存到redux中

知识点：

     useState

     useEffect

     在hooks中连接redux

     对于复杂的hooks数据的处理

引入面包屑，并作为子组件

引入redux连接api（useSelector），并获取数据steps

在组件加载后，对steps数据进行重组

对于复杂的数据，使用深拷贝后重新更新值

更新在后，hooks里边似乎不会对store中的数据进行监听。我就遇到过这个问题，后来将组件修改成了类组件并使用connect连接了store。如果你知道怎么解决这一问题，请向我留言哦

Hook是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数， 是 React 168 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

举个例子：

1只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

2只在 React 函数中调用 Hook

3Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。

1没有破坏性改动

完全可选

100%向后兼容

现在可用

2Hook 不会影响你对 React 概念的理解。

3只是换成了相关的函数方式更好的组合实现了现有的api

4解决在组件之间复用状态逻辑很难

react没有提供将可复用性行为“附加”到组件的途径，

高阶组件倒是可以但是容易形成嵌套地狱

renderprops 需要修改相应的组件结构

但是hook 可以自定义相关的hook 把公共的状态抽离出来，如果需要单元测试，测试函数比测试类好侧的多，相信我，历史教训