reactjs - 使用回调声明的顺序

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 仍然给出过时的计数值。是否有任何我遗漏的 Hook 规则？

是的，这里的一个修复是应用 eslint no-use-before-define。但我想了解为什么 .. 函数没有在 JavaScript 中提升并且声明的顺序无关紧要？

Answer 1

Is there any rule-of-hooks that I'm missing?

你不缺rule-of-hooks但是，你错过了 no-use-before-define 规则。

您必须使用 logCount aboveFunction. 上面的函数

在这张附加图片中也是如此

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

也许你可以添加 es-lint在您的项目中并确保添加此 plugin & no-use-before-define以及它会在 vs 代码中向您显示这些类型的警告。

希望这对您有所帮助!