React Hooks 单个组件优化

属性合并

下面是权限的一些属性定义，分开时，更新值或许方便那么一点，但看起来，不知道他们之间有什么关联，所以关于权限的属性可以定义在一个对象中，这样即减少变量名的使用，父子组件数据传递时也方便很多。

const [listData, setListData] = useState([])
const [loading, setLoading] = useState(false)
const [total, setTotal] = useState(0)

// 优化后
const [roleInfo, setRoleInfo] = useState({
    loading: false,
    listData: [],
    total: 0
});

// 更新值
setRoleInfo(v => ({ ...v, listData: res.result, loading: false, total: res.totalCount }));

// 父子数据传递
 <Content
  {...{
    roleInfo, // 不然可能要把这三个分开传 listData, loading, total
    canUpdate,
    canDelete,
    handleAllDelete,
    selectedRowKeys,
    setParams,
    setModalInfo,
    setSelectedRowKeys
  }}
/>

逻辑复用

当一个异步逻辑每个页面都有可能要调用时，例：获取按钮权限

// 定义 useUserAuth hooks文件
const [permissions, setPermissions] = useState(new Array(permissionsTextArr.length).fill(false));

// 因为传的参数是数组，所以要用useRef来接收他。不然useEffect监听permissionsTextArr会陷入死循环
const { current } = useRef({ permissionsTextArr });
current.permissionsTextArr = permissionsTextArr;

// 权限接口
useEffect(() => {
    let isLeave = false;
    (async function getPermissions() {
        if (!isLeave && res.code === 200) {
            setPermissions(mapPermissions);
        }
    }());
    return () => {
      isLeave = true;
    };
}, [current]);

// 返回权限
return permissions;


// 调用
const [canCreate, canUpdate, canDelete] = useUserAuth(['角色管理_新增', '角色管理_修改', '角色管理_删除']);

副作用处理

通常页面摧毁时，异步的逻辑应该不需要处理或者直接取消接口调用

// 接口
useEffect(() => {
    let isLeave = false;
    (async function getPermissions() {
        // 不处理异步逻辑
        if (!isLeave && res.code === 200) {
            setPermissions(mapPermissions);
        }
    }());
    // 副作用处理
    return () => {
      isLeave = true;
    };
}, [current]);

总结

本文只是本人的一些想法，本人很少写文章，如有错误请大佬们指出。谢谢大家