ReasonML中的useEffect与useEffect0

我正在尝试了解两者之间的区别:

 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,则必须更改useEffectuseEffect0

使用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>;
};

那为什么在使用其他结构时呼叫会发生变化?

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

谢谢。

lkj123lkj123lkj 回答:ReasonML中的useEffect与useEffect0

Reason中的

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

区别在于JavaScript中插入了第二个[]参数。默认情况下,JavaScript中的useEffect每个渲染一起触发。通过在第二个参数中添加空数组,我们告诉React在组件首次渲染时仅将其触发一次。

本文链接:https://www.f2er.com/2526059.html

大家都在问