记住自定义react挂钩中的依赖项是反模式吗?

时间:2019-08-12 12:55:58

标签: javascript reactjs react-hooks

我遇到了自己编写的自定义钩子,该钩子公开了套接字连接,事实是代码已经存在并且可以正常工作,但是我有以下API。

const socket = useWebSocket(
  companyId,
  accessToken,
  resourceUrl,
  !settings.data.manualDispatch,
  options
);

该钩子封装了几件事:

  1. 通过首先请求附加到WebSocket url 的票证来对WebSocket连接进行身份验证(因此,它实际上会执行第一个HTTP请求,该请求将返回票证,然后触发其他效果来创建连接并更新套接字状态正在返回)
  2. 正如我之前提到的,它向票证发出请求并创建WebSocket连接
  3. 在创建新的WebSocket连接时清理所有现有的WebSocket连接(通过状态管理)

问题是:

我正在当前使用该钩子内的引用以避免创建新对象并最终陷入无限循环,但会考虑使用反模式吗?

在备忘录旁边使用备忘录? 是的,肯定是有效的方法,但是我觉得我在强迫开发人员使用我的钩子在上反复编写相同的代码(在将选项传递给钩子之前记住这些选项)

摘要:

选项1:

不要记住使用该钩子的选项,并在钩子中执行该过程(因为选项是由不意味着要更改的内容,URL和回调组成)。

   const socket = useWebSocket(
        companyId,
        accessToken,
        resourceUrl,
        !settings.data.manualDispatch,
        {
            onMessageCallback: message => {
                // do things with message
            },
            onUnexpectedCloseCallback: () => {
                // do things on close
            },
            url: websocketUrl,
        }
    );

选项2:

我们记住这些选项以便使用挂钩,因为选项1是反模式

    const options = useMemo(
        () => ({
            onMessageCallback: message => {
                // do things with message
            },
            onUnexpectedCloseCallback: () => {
                // do things on close
            },
            url: websocketUrl,
        }),
        [websocketUrl]
    );

    const socket = useWebSocket(
        companyId,
        accessToken,
        resourceUrl,
        !settings.data.manualDispatch,
        options
    );

0 个答案:

没有答案