useEffect против useEffect0 в ReasonML - PullRequest
Новая
       30

useEffect против useEffect0 в ReasonML

1 голос
/ 02 апреля 2020

Я пытаюсь понять, в чем разница: 

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

Так почему же меняется вызов при использовании другой структуры?

Будем весьма благодарны за любые ссылки или пояснения.

Спасибо.

1 Ответ

3 голосов
/ 02 апреля 2020

React.useEffect(f) в Reason составляет React.useEffect(f) в JavaScript. React.useEffect0(f) в Reason компилируется в React.useEffect(f, []) в JavaScript.

Разница в том, что второй [] аргумент вставлен в JavaScript. По умолчанию useEffect в JavaScript запускается с при каждом рендеринге. Добавляя пустой массив во второй аргумент, мы указываем React запускать его только один раз, когда компонент сначала рендерится.

...