useEffect

Question

useEffect监听上下文是正确的吗？

const {
  data,
} = useContext(AuthContext);

async function getProfile() {
    try {
      setLoading(true);
      console.info('getProfile called', data.token);
      const response = await getByToken(data.token);
      if (response && response.ok) {
        setFirstName(response.userData.firstName);
        setLastName(response.userData.lastName);
        setEmail(response.userData.email);
      }
    } catch (e) {
      console.info('Error', e);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (data.userData) {
      getProfile();
    }
  }, [data.userData]);

这就是我发现的使用与null不同的getProfile调用userData的方式

Answer 1

是的，这就是它的工作原理。虽然说useEffect正在监听变量中的更改可能是不正确的。运行useEffect内部的回调是因为满足了两个条件：

1. 会有渲染的。
2. 依赖项数组有一个更改依赖项。

rerender是因为上下文值已经更改，内部组件是Consumer of Context (因为它调用了useContext)。而且，由于useEffect依赖数组中包含的依赖项也会发生变化，因此将运行回调。

沙箱链接有一个简单的例子