Question

在这个关于自定义钩子的reactjs文档示例中

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

我们假设此Foo组件调用了tnhat

function Foo(props) {
  const [state, setState] = useState({...});
  ...
  useFriendStatus(friendID)
  ...
}

调用handleStatusChange并更改useEffect本地状态isOnline时，会发生什么？

Foo组件会立即或多或少地立即呈现（我知道 setState （）呈递延状态），或者它将等待直到其{{1 }}或state是否已更新？

据我所知，只有当调用它的组件被渲染或我错了时，才会调用自定义钩子？

Answer 1

当handleStatusChange被调用并且useEffect本地状态为在线更改时，会发生什么？

Foo组件会立即或多或少地被渲染（我知道setState（）是异步的）还是会等到它自己的状态或道具被更新？

设置状态是导致对组件进行重新渲染的原因。调用setIsOnline时，组件的状态已更新，并且立即或多或少地重新渲染。

据我所知，只有当调用它的组件被渲染或我错了时，才会调用自定义钩子？

自定义钩子很方便：它们使您可以重用代码，或者只是使代码更具可读性。但是他们不会改变反应知道的事情。 React只知道您呼叫了useState，useEffect和后来的setIsOnline。它不知道该代码是内联编写还是提取到辅助方法中。

如果React在渲染时看到useState的调用，它将设置一个状态变量和一个setter函数。如果调用该setter函数，它将重新呈现该组件。

更新后的useEffect本地状态行为

1 个答案: