use-effect - ReasonML 中的 useEffect 与 useEffect0

Question

我试图了解两者之间的区别:

 React.useEffect(() => {
    let timerId = Js.Global.setInterval(() => tick(), 1000);
    Some(() => Js.Global.clearInterval(timerId));
  });
 React.useEffect0(() => {
    let timerId = Js.Global.setInterval(() => tick(), 1000);
    Some(() => Js.Global.clearInterval(timerId));
  });

它们都具有相同的类型签名并且都编译但 useEffect0什么也没做:

// useEffect0 : unit => option(unit => unit) => unit
// useEffect : unit => option(unit => unit) => unit

使用 https://reasonml.github.io/reason-react/blog/2019/04/10/react-hooks 处的示例，它使用 useEffect但是如果你改变它使用 useState而不是 useReducer你要改 useEffect至 useEffect0
原版使用 useEffect0 :

type action =
  | Tick;

type state = {
  count: int,
};

[@react.component]
let make = () => {
  let (state, dispatch) = React.useReducer(
    (state, action) =>
      switch (action) {
      | Tick => {count: state.count + 1}
      },
    {count: 0}
  );

  React.useEffect0(() => {
    let timerId = Js.Global.setInterval(() => dispatch(Tick), 1000);
    Some(() => Js.Global.clearInterval(timerId))
  });

  <div>{ReasonReact.string(string_of_int(state.count))}</div>;
};

删除后 useReducer并使用 useEffect :

[@react.component]
let make = () => {
let (state, dispatch) = React.useState(()=>
    {count: 0}
  );
let tick =()=> dispatch(_=>{count: state.count + 1});
  React.useEffect(() => {
    let timerId = Js.Global.setInterval(() => tick(), 1000);
    Some(() => Js.Global.clearInterval(timerId))
  });

  <div>{ReasonReact.string(string_of_int(state.count))}</div>;
};

那么为什么在使用不同的结构时调用会发生变化呢？

任何链接或解释将不胜感激。

谢谢你。

Answer 1

React.useEffect(f)在 Reason 编译为 React.useEffect(f)在 JavaScript 中。 React.useEffect0(f)在 Reason 编译为 React.useEffect(f, [])在 JavaScript 中。

不同的是第二个[]插入到 JavaScript 中的参数。默认情况下，useEffect在 JavaScript 中，每次渲染都会触发。通过在第二个参数中添加空数组，我们告诉 React 在组件第一次渲染时只触发一次。