资讯专栏INFORMATION COLUMN

Ant Design Pro - 实践React Hooks - 页面

wangbjun / 1976人阅读

摘要:背景目前是社区最炙手可热的新技术,我们准备追一下热度,在当前的项目中实践一下技术。我们的项目使用的脚手架是,初步想法是把现有的一个有状态页面组件重构成函数组件。存放表单值的状态是声明在列表组件,传给表单组件。

背景

React Hooks目前是React社区最炙手可热的新技术,我们准备追一下热度,在当前的项目中实践一下Hooks技术。
我们的项目使用的脚手架是Ant Design Pro 2.0,初步想法是把现有的一个有状态页面组件重构成Hooks函数组件。

设计

动手之前,先理一下思路,用Hook函数重构的话,需要调整哪些部分:

组件类要拆解成Hooks函数

组件状态改成Hooks状态

类属性改成Hooks函数本地变量

类方法改成Hooks函数的嵌套函数,可公用的也可以作为Hooks函数平级的函数

再理一下过程中的问题:

函数和类不一样,它的this是由调用方决定的,是不确定的,所以不要使用this(Hooks函数里面也没必要用this)。

没有this,就需要用传参了,Hooks函数就是props转递。

Dva的使用,Ant Design Pro使用的Dva来管理数据(里面封装的是Redux),这里我们还是可以继续使用,通过connect把Redux管理的model数据注入props。

</>复制代码

  1. 这里有个小知识点,组件类的model注入,使用了注解形式的装饰器,函数是不能使用装饰器的,所以需要我们手工注入。理解一点:这里的装饰器就是高阶函数

状态共享,Hooks状态如何共享给其他Hooks函数或普通函数?Hooks状态声明时会返回:状态、修改此状态的方法,这两个返回值是可以传递和共享的

</>复制代码

  1. 这里也补充一个小知识,我们是可以声明一个服务类的Hooks,然后把状态和状态修改器返回来,这个是可以共享和传递的,可以实现类似全局状态管理器的功能,Hooks也提供了额外的辅助方法:useReducer。这里可以深入去学习一下。

解决了这些问题,我们就可以实践了。

实现

我们拆成了两个Hooks组件:分页列表 + 查询表单,来看看最终实现的代码。

入口 - 分页列表Hooks组件

</>复制代码

  1. function TableList(props) {
  2. const {
  3. dispatch,
  4. account: { accountList },
  5. loading,
  6. } = props;
  7. const [formValues, setFormValues] = useState({});
  8. const [selectedRows] = useState([]);
  9. const columns = [
  10. {
  11. title: "序号",
  12. dataIndex: "_index",
  13. },
  14. {
  15. title: "账户名称",
  16. dataIndex: "accountName",
  17. },
  18. ];
  19. function handleSearch(e) {
  20. e && e.preventDefault();
  21. const { form } = props;
  22. form.validateFields((err, fieldsValue) => {
  23. if (err) return;
  24. dispatch({
  25. type: "account/accountList",
  26. payload: fieldsValue,
  27. });
  28. });
  29. }
  30. function handleStandardTableChange(pagination, filtersArg, sorter) {
  31. const filters = Object.keys(filtersArg).reduce((obj, key) => {
  32. const newObj = { ...obj };
  33. newObj[key] = getValue(filtersArg[key]);
  34. return newObj;
  35. }, {});
  36. const params = {
  37. pageNumber: pagination.current,
  38. pageSize: pagination.pageSize,
  39. ...formValues,
  40. ...filters,
  41. };
  42. if (sorter.field) {
  43. params.sort = sorter.order === "ascend" ? "asc" : "desc";
  44. }
  45. dispatch({
  46. type: "account/accountList",
  47. payload: params,
  48. });
  49. }
  50. useEffect(() => {
  51. dispatch({
  52. type: "account/clear",
  53. });
  54. // 自动查询
  55. handleSearch();
  56. }, []);
  57. return (
  58. );
  59. }
  60. const tableList = connect(({ accountaging, loading }) => ({
  61. accountaging,
  62. loading: loading.models.accountaging,
  63. }))(Form.create()(TableList));
  64. export default tableList;

这里我们注意几个点:

props我们是透传给列表查询表单的。

查询方法也是传过去的。

存放表单值的状态是声明在列表组件,传给表单组件。

这里的userEffect实现了之前ComponentDisMount的功能,注意:依赖传入了一个空数组,这里表示不依赖任何状态,所以只会在初次加载时执行,否则会出现死循环

组件导出前,有个model和form的注入。

列表查询表单

</>复制代码

  1. function SearchForm(props) {
  2. const {
  3. account: { accountList },
  4. form,
  5. formValues,
  6. handleSearch,
  7. } = props;
  8. const { getFieldDecorator } = form;
  9. return (
  10. {getFieldDecorator("accountName", {
  11. initialValue: "",
  12. })()}
  13. 查询
  14. );
  15. }

表单组件这块,东西不多,理解props就好。

想法

其实整个实现下来,并不难。但是还有些问题需要我们考虑一下:

使用Hooks之后,带来了哪些改变?

代码逻辑是不是更优了?

代码结构是否清晰?

什么样是最佳实践?

欢迎讨论。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106278.html

相关文章

  • Ant Design Pro - 实践React Hooks - 组件

    摘要:另外,监听事件,更新宽度状态。文本真实宽度渲染完成后,通过获取元素宽度。是否超长比较文本真实宽度和组件的宽度。设置为其他状态或中的状态时,只在这些状态变化时触发注意,依赖为对象时,不会深比较。得益于的用法灵活,组件写法上确实简洁不少。 需求 后台项目,使用Ant Design Pro, 有这样一个需求:有一个表格,宽度是自适应的,表格中有一列是备注,文本长度不定,我们希望在文本过长的时...

    twohappy 评论0 收藏0
  • TypeScript 、React、 Redux和Ant-Design的最佳实践

    摘要:使用官方的的另外一种版本和一起使用自动配置了一个项目支持。需要的依赖都在文件中。带静态类型检验,现在的第三方包基本上源码都是,方便查看调试。大型项目首选和结合,代码调试维护起来极其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律,指的是any application that can be wr...

    wangbinke 评论0 收藏0
  • TypeScript 、React、 Redux和Ant-Design的最佳实践

    摘要:使用官方的的另外一种版本和一起使用自动配置了一个项目支持。需要的依赖都在文件中。带静态类型检验,现在的第三方包基本上源码都是,方便查看调试。大型项目首选和结合,代码调试维护起来极其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律,指的是any application that can be wr...

    codeKK 评论0 收藏0
  • react-control-center里玩转无状态组件

    摘要:类组件中的增加学习成本,类组件在基于现有工具的优化上存在些许问题。由于业务变动,函数组件不得不改为类组件等等。那么可爱的各位看官,还不赶紧使用起来在线示例点我版本基础入门项目录像教程 视图与业务,好一对冤家 业务型model model是需要精心的设计和合理的划分的,这是我们之前开发大型的redux+react单页面应用,大家都认同的真理,同样的,在react-control-cent...

    xiangzhihong 评论0 收藏0

发表评论

0条评论

wangbjun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<