Ant Design Pro - 实践React Hooks - 页面

wangbjun 发布于2019-08-26 10:30 / 1883人阅读

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

背景

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。

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

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

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

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

实现

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

入口 - 分页列表Hooks组件

function TableList(props) {
  const {
    dispatch,
    account: { accountList },
    loading,
  } = props;

  const [formValues, setFormValues] = useState({});
  const [selectedRows] = useState([]);

  const columns = [
    {
      title: "序号",
      dataIndex: "_index",
    },
    {
      title: "账户名称",
      dataIndex: "accountName",
    },
  ];

  function handleSearch(e) {
    e && e.preventDefault();
    const { form } = props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      dispatch({
        type: "account/accountList",
        payload: fieldsValue,
      });
    });
  }

  function handleStandardTableChange(pagination, filtersArg, sorter) {
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      pageNumber: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sort = sorter.order === "ascend" ? "asc" : "desc";
    }

    dispatch({
      type: "account/accountList",
      payload: params,
    });
  }

  useEffect(() => {
    dispatch({
      type: "account/clear",
    });
    // 自动查询
    handleSearch();
  }, []);

  return (
    
      
        
          
            
          
          
        
      
    
  );
}

const tableList = connect(({ accountaging, loading }) => ({
  accountaging,
  loading: loading.models.accountaging,
}))(Form.create()(TableList));

export default tableList;

这里我们注意几个点：

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

查询方法也是传过去的。

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

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

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

列表查询表单

function SearchForm(props) {
  const {
    account: { accountList },
    form,
    formValues,
    handleSearch,
  } = props;
  const { getFieldDecorator } = form;

  return (
    
      
        
          
            {getFieldDecorator("accountName", {
              initialValue: "",
            })()}
          
        
        
          
        
      
    
  );
}

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

想法

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

使用Hooks之后，带来了哪些改变？

代码逻辑是不是更优了？

代码结构是否清晰？

什么样是最佳实践？

欢迎讨论。

GPU云服务器云服务器 Ant Design ant-design React hooks react-hooks

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

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

Ant Design Pro - 实践React Hooks - 组件

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

twohappy 2019-08-26 10:40 评论0 收藏0
TypeScript 、React、 Redux和Ant-Design的最佳实践

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

wangbinke 2019-08-23 17:10 评论0 收藏0
TypeScript 、React、 Redux和Ant-Design的最佳实践

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

codeKK 2019-08-29 18:42 评论0 收藏0
在react-control-center里玩转无状态组件

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

xiangzhihong 2019-08-26 13:33 评论0 收藏0