Ice编写组件&样式方案&数据请求&状态管理《五》

编写demo组件：

React Hooks#

在编写组件过程中，我们会经常用到 React Hooks，除了 React 内置的 useState, useMemo 等 Hooks，我们结合大量实践沉淀了一套 ahooks 的解决方案，可以减少很多重复编码工作。

比如当我们需要监听并操作 url query，就可以直接使用 useUrlState 这个 hooks：

import React from 'react';
import { useUrlState } from 'ahooks';

export default () => {
  const [urlQuery, setUrlQuery] = useUrlState({ count: '1' });
  return (
    <>
      <button type="button" onClick={() => setUrlQuery({ count: Number(urlQuery.count || 0) + 1 })}>
        add
      </button>
      <button type="button" onClick={() => setUrlQuery({ count: undefined })}>
        clear
      </button>
      <div>urlQuery.count: {urlQuery?.count}</div>
    </>
  );
};

通过类似 useUrlState 的封装，可以极大的减少我们的编码量。ahooks 主要提供了以下几类 Hooks：

• Table
• UI
• State
• SideEffect
• LifeCycle
• DOM
• Advanced

具体使用详见 ahooks。

样式方案：

全局样式#

对于整个项目的全局样式，统一定义在 src/global.[scss|less|scss] 文件中，框架会默认引入该文件：

// 引入默认全局样式
@import '@alifd/next/reset.scss';

body {
  -webkit-font-smoothing: antialiased;
}

局部样式#

对于页面级和组件级的样式，推荐使用 CSS Modules 的方案，这能很好的解决样式开发中的两个痛点问题：全局污染、命名错乱

也就是React原生也有的index.module.scss，然后局部使用className={styles.container}

---

如何全局覆盖基础组件（next/antd）样式？

暂未发现这个有啥影响

数据请求：

globalServices.tsx文件，项目demo：

import { request } from 'ice';

export default {
    async getUserTree() {
        return await request({
            url: 'url',
            method: 'GET',
        })
    },
    async queryRoleMenuById(roleId: any) {
        return await request(`url${roleId}`)
    }
}

官网推荐常用使用方式：

request(RequestConfig);

request.get('/user', RequestConfig);
request.post('/user', data, RequestConfig);

{
  // `url` is the server URL that will be used for the request
  url: '/user',
  // `method` is the request method to be used when making the request
  method: 'get', // default
  // `headers` are custom headers to be sent
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },
  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  data: {
    firstName: 'Fred'
  },
  // `timeout` specifies the number of milliseconds before the request times out.
  // If the request takes longer than `timeout`, the request will be aborted.
  timeout: 1000, // default is `0` (no timeout)
  // `withCredentials` indicates whether or not cross-site Access-Control requests
  // should be made using credentials
  withCredentials: false, // default
  // `responseType` indicates the type of data that the server will respond with
  // options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  // should be made return full response
  withFullResponse: false,
  // request instance name
  instanceName: 'request2'
}

useRequest#

用在函数式组件中，使用 useRequest 可以极大的简化对请求状态的管理。

-----------暂时不知道咋用滴，是ahooks里的东西，官网demo：

// 用法 1：传入字符串
const { data, error, loading } = useRequest('/api/repo');

// 用法 2：传入配置对象
const { data, error, loading } = useRequest({
  url: '/api/repo',
  method: 'get',
});

// 用法 3：传入 service 函数
const { data, error, loading, request } = useRequest((id) => ({
  url: '/api/repo',
  method: 'get',
  data: { id },
});

请求配置：

在实际项目中通常需要对请求进行全局统一的封装，例如配置请求的 baseURL、统一 header、拦截请求和响应等等，这时只需要在应用的的 appConfig 中进行配置即可。

状态管理

icejs 内置了状态管理方案，并在此基础上进一步遵循 “约定优于配置” 原则，进行抽象和封装，使得状态管理变得非常容易。

全局应用状态#

定义 Model#

约定全局状态位于 src/models 目录，目录结构如下：

src
├── models // 全局状态
| ├── counter.ts
│ └── user.ts
└── store.ts

状态管理