美文网首页
React useEffect:每个开发都应该知道的4个技巧

React useEffect:每个开发都应该知道的4个技巧

作者: QLing09 | 来源:发表于2020-08-30 00:14 被阅读0次

    我们经常维护一些组件,组件起初很简单,但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如,组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是,同一个 componentDidMount 中可能也包含很多其它的逻辑,如设置事件监听,而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分,而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug,并且导致逻辑不一致。

    在多数情况下,不可能将组件拆分为更小的粒度,因为状态逻辑无处不在。这也给测试带来了一定挑战。同时,这也是很多人将 React 与状态管理库结合使用的原因之一。但是,这往往会引入了很多抽象概念,需要你在不同的文件之间来回切换,使得复用变得更加困难。

    为了解决这个问题,Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据),而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态,使其更加可预测。

    怎么才能把Effect Hook 用好呢?

    我们来谈谈React Hooks中的useEffects,将与你分享4个有用的技巧。使用useEffect时应该记住这四个技巧。

    翻译文章来源:Medium
    原标题:React useEffect: 4 Tips Every Developer Should Know

    翻译开始

    将useEffect用于一个单一功能

    在React Hooks,可以有多个useEffect函数。这是一个很棒的功能,如果我们分析如何编写简洁的代码,会发现函数应该提供一个单一功能(就像一个句子仅传达一个想法一样)。

    useEffect拆分为简短而甜美的单用途函数也可以防止意外执行(使用依赖数组时)。

    例如:如果varBvarA没有关系,并且想根据useEffect构建一个递归计数器(有setTimeout),那么编写一些错误的代码:

    function App() {
      const [varA, setVarA] = useState(0);
      const [varB, setVarB] = useState(0);
      // Don't do this!
      useEffect(() => {
        const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
        const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);
    
        return () => {
          clearTimeout(timeoutA);
          clearTimeout(timeoutB);
        };
      }, [varA, varB]);
    
      return (
        <span>
          Var A: {varA}, Var B: {varB}
        </span>
      );
    }
    

    如你所见,变量varBvarA任何一个更改都将触发两个变量的更新。这就是为什么hook无法正常工作的原因。

    由于这只是一个简单的示例,也许会觉得这很简单,但是,在更长的函数中使用更多的代码和变量,我保存你会忽略这一点。因此,拆分useEffect才是最正确的做法。

    这个示例,应该是下面这样:

    
    function App() {
      const [varA, setVarA] = useState(0);
      const [varB, setVarB] = useState(0);
      // Correct way
      useEffect(() => {
        const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    
        return () => clearTimeout(timeout);
      }, [varA]);
    
      useEffect(() => {
        const timeout = setTimeout(() => setVarB(varB + 2), 2000);
    
        return () => clearTimeout(timeout);
      }, [varB]);
    
      return (
        <span>
          Var A: {varA}, Var B: {varB}
        </span>
      );
    }
    

    ️注意:这个代码仅用于示例目的,旨在帮助你轻松理解useEffect的问题。通常,当变量依赖先前的状态时,建议的方法是改为使用setVarA(varA => varA + 1)代替。

    尽量使用自定义的hooks

    再次以上面的示例为例。如果变量varBvarA完全独立怎么办?

    在这种情况下,可以简单地创建一个自定义钩子来隔离每个变量。这样,可以准确的了解哪个函数对哪个变量执行的操作。

    接下来,我们来构建一些自定义hooks!

    function App() {
      const [varA, setVarA] = useVarA();
      const [varB, setVarB] = useVarB();
    
      return (
        <span>
          Var A: {varA}, Var B: {varB}
        </span>
      );
    }
    
    function useVarA() {
      const [varA, setVarA] = useState(0);
    
      useEffect(() => {
        const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    
        return () => clearTimeout(timeout);
      }, [varA]);
    
      return [varA, setVarA];
    }
    
    function useVarB() {
      const [varB, setVarB] = useState(0);
    
      useEffect(() => {
        const timeout = setTimeout(() => setVarB(varB + 2), 2000);
    
        return () => clearTimeout(timeout);
      }, [varB]);
    
      return [varB, setVarB];
    }
    

    现在每个变量都有自己的hook.更易于维护和阅读!

    正确的方式加条件地运行useEffect

    看下面示例,关于setTimeout的主题:

    function App() {
      const [varA, setVarA] = useState(0);
    
      useEffect(() => {
        const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    
        return () => clearTimeout(timeout);
      }, [varA]);
    
      return <span>Var A: {varA}</span>;
    }
    

    由于某种原因,希望将计数器的最大值限制为5。给出一种正确的方法和一种错误的方法。

    首先看错误的方式:

    function App() {
      const [varA, setVarA] = useState(0);
    
      // Don't do this!
      useEffect(() => {
        let timeout;
        if (varA < 5) {
          timeout = setTimeout(() => setVarA(varA + 1), 1000);
        }
    
        return () => clearTimeout(timeout);
      }, [varA]);
    
      return <span>Var A: {varA}</span>;
    }
    

    尽管这可行,但请记住只要varA改变cleatTimeout就会运行,而setTimeout是在满足条件下运行的。

    推荐方式:在有条件的情况下运行useEffect,在头部添加一个条件返回,如下:

    function App() {
      const [varA, setVarA] = useState(0);
    
      useEffect(() => {
        if (varA >= 5) return;
    
        const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    
        return () => clearTimeout(timeout);
      }, [varA]);
    
      return <span>Var A: {varA}</span>;
    }
    

    使用Material UI能看到很多这种用法(以及许多其他UI框架),并且可以确保没有错误的运行useEffect

    在依赖数组中键入useEffect内部的每个prop

    如果使用ESLint,可能会看到来自ESLint的警告exhaustive-deps rule

    这很关键。当你的应用程序变得越来越大,每个useEffect中都会添加更多的依赖项(props)。为了跟踪所有这些props并避免过时的关闭,应该将每个依赖项到依赖数组中。(Here’s the official take on this subject)

    继续,上面的setTimeout,假设只想运行一次setTimeout并添加到var中,就像前面的示例一样。

    你可能尝试下面错误的方式:

    function App() {
      const [varA, setVarA] = useState(0);
    
      useEffect(() => {
        const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    
        return () => clearTimeout(timeout);
      }, []); // Avoid this: varA is not in the dependency array!
    
      return <span>Var A: {varA}</span>;
    }
    

    尽管这个满足需求,但让我们再花点时间思考一下,“如果你的代码变得更大会怎么样?”,或者,“如果想将上面的代码进行更改怎么办?”

    在这种情况下,需要将所有的变量都映射出来,因为可以更轻松地测试和检测可能出现的问题(之前的props和closures)。

    正确的方式应该是:

    function App() {
      const [varA, setVarA] = useState(0);
    
      useEffect(() => {
        if (varA > 0) return;
    
        const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    
        return () => clearTimeout(timeout);
      }, [varA]); // Great, we have our dependency array correctly set
    
      return <span>Var A: {varA}</span>;
    }
    
    

    翻译完毕!

    如果有什么疑问或建议请在评论里面回复。


    相关文章

      网友评论

          本文标题:React useEffect:每个开发都应该知道的4个技巧

          本文链接:https://www.haomeiwen.com/subject/tkzksktx.html