useCallback声明的顺序

Question

useCallback函数声明的顺序重要吗？例如：

按以下顺序声明的函数：

1. const aboveFunction = useCallback(()=>{ logCount() },[logCount])
2. const logCount = useCallback(()=>{ console.log(count) },[count])
3. const belowFunction = useCallback(()=>{ logCount() },[logCount])

注意，aboveFunction和belowFunction都引用相同的logCount。打电话给setCount(2)之后，

aboveFunction() -> logCount() -> count // 0

belowFunction() -> logCount() -> count // 2

https://codesandbox.io/s/react-hooks-counter-demo-forked-7mofy?file=/src/index.js

/**
  Click increment button until count is 2, then click 
  Above and Below button and check console log
 * Even though the count value is > 0, aboveIncrement console.log(count) still gives 0
 */

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [count, setCount] = useState(0);

  /** Assuming all the functions below do some intensive stuffs to justify useCallback */
  const aboveFunction = useCallback(() => {
    // ...do other intensive stuff
    logCount("Above count:"); // Above count: 0
  }, [logCount]);

  const logCount = useCallback(
    (str) => {
      // ...do other intensive stuff
      console.log(str, count);
    },
    [count]
  );

  const belowFunction = useCallback(() => {
    // ...do other intensive stuff
    logCount("Below count:"); // Above count: 2
  }, [logCount]);

  return (
    <div className="App">
      <h1>
        Click increment button until count is 2, then click Above/ Below button
        and see console log
      </h1>
      <h2>You clicked {count} times!</h2>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          flexDirection: "column"
        }}
      >
        <button style={{ margin: 10 }} onClick={aboveFunction}>
          Above Increment Function
        </button>
        <button style={{ margin: 10 }} onClick={() => setCount(count + 1)}>
          Increment
        </button>
        <button style={{ margin: 10 }} onClick={belowFunction}>
          Below Increment Function
        </button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

显然，useCallback声明的顺序对于代码的工作非常重要。但是，如果我们这样写它，https://codesandbox.io/s/react-hooks-counter-demo-forked-7mofy?file=/src/index1.js

  let logCount;
  const aboveFunction = useCallback(() => {
    logCount("Above count:"); // Above count: 0
  }, [logCount]);

  logCount = useCallback((str) => {
      console.log(str, count);
    }, [count]
  );

  const belowFunction = useCallback(() => {
    logCount("Below count:"); // Above count: 2
  }, [logCount]);

aboveFunction仍然给出陈旧的计数值。我错过了什么规则吗？

是的，这里的一个修复方法是应用eslint no-use-before-define。但我想知道为什么..。函数不是在JavaScript中挂起的吗?声明它的顺序不重要吗？

Answer 1

我错过了什么规则吗？

您不是缺少rule-of-hooks，而是缺少了no-use-before-define规则。

您必须使用logCount函数在aboveFunction.之上

在这个附加的图像中

​

​

您可以看到，它显示了函数声明的警告。

也许您可以在您的项目中添加es-lint，并确保您也添加了这个插件 & 不使用前定义，以便在vs代码中显示这些类型的警告。

希望这能有所帮助！