chuckQu

V1

2022/06/15阅读:19主题:凝夜紫

React技巧之理解Eslint规则

原文链接:https://bobbyhadz.com/blog/react-hooks-exhaustive-deps[1]

作者:Borislav Hadzhiev[2]

正文从这开始~

起因

当我们在effect钩子中缺少依赖时,react-hooks/exhaustive-deps规则会警告我们。要摆脱这个警告,可以把函数或变量声明移到useEffect钩子里面,把每次渲染都会变化的数组和对象记忆存储,或者禁用这个规则。

下面是一个如何引起警告的例子。

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

export default function App({
  const [address, setAddress] = useState({country''city''});

  // 👇️ objects/arrays are different on re-renders
  // they are compared by reference (not by contents)
  const obj = {country'Germany'city'Hamburg'};

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

    // ⛔️ React Hook useEffect has a missing dependency: 'obj'.
    // Either include it or remove the dependency array. eslintreact-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      <h1>Country: {address.country}</h1>
      <h1>City: {address.city}</h1>
    </div>

  );
}

代码片段的问题在于,我们在useEffect钩子内部使用了obj变量,但是我们没有把它包含在依赖数组里。

最明显的解决方法是将obj变量添加到useEffect钩子的依赖数组中。

然而,在这种情况下,它会导致一个错误,因为对象和数组在JavaScript中是通过引用进行比较的。

obj变量是一个对象,在每次重新渲染时都有相同的键值对,但它每次都指向内存中的不同位置,所以它将无法通过相等检查,并导致无限重渲染循环。

在JavaScript中,数组也是通过引用进行比较的。

禁用

绕过 "React Hook useEffect has a missing dependency"的警告的一个方法是禁用单行或整个文件的eslint规则。

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

export default function App({
  const [address, setAddress] = useState({country''city''});

  // 👇️ objects/arrays are different on re-renders
  const obj = {country'Germany'city'Hamburg'};

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      <h1>Country: {address.country}</h1>
      <h1>City: {address.city}</h1>
    </div>

  );
}

依赖数组上方的注释禁用了单行的 react-hooks/exhausting-deps 规则。

useEffect钩子作为第二参数传递一个空数组时,它只在组件挂载时被调用。

移动到钩子内部

另一个解决办法是,将变量或者函数声明移动到useEffect钩子内部。

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

export default function App({
  const [address, setAddress] = useState({country''city''});

  useEffect(() => {
    // 👇️ move object / array / function declaration
    // inside of the useEffect hook
    const obj = {country'Germany'city'Hamburg'};

    setAddress(obj);
    console.log('useEffect called');
  }, []);

  return (
    <div>
      <h1>Country: {address.country}</h1>
      <h1>City: {address.city}</h1>
    </div>

  );
}

我们将对象的变量声明移动到useEffect钩子内部。这样就消除了警告,因为这个钩子不再依赖外部对象。

移动到组件外部

另一种不怎么常用,但是最好了解一下的解决办法是,将函数或者变量的声明移动到组件的外部。

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

// 👇️ move function/variable declaration outside of component
const obj = {country'Germany'city'Hamburg'};

export default function App({
  const [address, setAddress] = useState({country''city''});

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');
  }, []);

  return (
    <div>
      <h1>Country: {address.country}</h1>
      <h1>City: {address.city}</h1>
    </div>

  );
}

这样是有用的,是因为每当组件重新渲染时,变量不会重新创建。在所有的渲染中,变量指向相同的内存地址,因此useEffect钩子不需要将其作为依赖数组进行跟踪。

使用useMemo

另一种解决办法是,使用useMemo钩子得到一个记忆值。

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

export default function App({
  const [address, setAddress] = useState({country''city''});

  // 👇️ get memoized value
  const obj = useMemo(() => {
    return {country'Germany'city'Hamburg'};
  }, []);

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

    // 👇️ safely include in dependencies array
  }, [obj]);

  return (
    <div>
      <h1>Country: {address.country}</h1>
      <h1>City: {address.city}</h1>
    </div>

  );
}

我们使用了useMemo钩子来获取在渲染期间不会改变的记忆值。

useMemo钩子接收一个函数,该函数返回一个记忆值,将依赖数组作为参数。如果其中一个依赖有改变,该钩子就会重新计算记忆值。

请注意,如果你正在使用一个函数,你将使用useCallback钩子来获得一个在渲染期间不会改变的记忆化回调。

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

export default function App({
  const [address, setAddress] = useState({country''city''});

  // 👇️ get memoized callback
  const sum = useCallback((a, b) => {
    return a + b;
  }, []);

  // 👇️ get memoized value
  const obj = useMemo(() => {
    return {country'Germany'city'Santiago'};
  }, []);

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

    console.log(sum(100100));

    // 👇️ safely include in dependencies array
  }, [obj, sum]);

  return (
    <div>
      <h1>Country: {address.country}</h1>
      <h1>City: {address.city}</h1>
    </div>

  );
}

useCallback钩子接收一个内联回调函数和一个依赖数组,并返回一个记忆化的回调版本,只有当其中一个依赖发生变化时才会改变。

如果这些建议对你的使用情况都不起作用,你总是可以用注释来使警告闭嘴。

参考资料

[1]

https://bobbyhadz.com/blog/react-hooks-exhaustive-deps: https://bobbyhadz.com/blog/react-hooks-exhaustive-deps

[2]

Borislav Hadzhiev: https://bobbyhadz.com/about

分类:

前端

标签:

React.js

作者介绍

chuckQu
V1