关于react hooks的一些疑问

Question

let number = 1;

const callback = () => {
  console.log('callback', number);
};

class Scroll {
  constructor(callback) {
    this.callback = callback;
  }
}

const scroll = new Scroll(() => console.log(number));

number = 2;

scroll.callback();

demo链接：http://js.jirengu.com/xeninan...
这种情况打印的是2，跟预期是一样的

import React from "react";
import ReactDOM from "react-dom";

class Scroller {
  constructor(callback) {
    console.log("hehe");
    this.callBack = callback;
  }

  doSomething() {
    this.callBack();
  }
}

const Demo = (props) => {
  const [scroller, setScroller] = React.useState(null);

  const onScrollerClick = () => {
    scroller.doSomething();
  };
  React.useEffect(() => {
    setScroller(
      new Scroller(() => {
        const { callback } = props;
        callback();
      })
    );
  }, []);
  return (
    <div>
      <button onClick={onScrollerClick}>scroller</button>
    </div>
  );
};

const Container = () => {
  const [count, setCount] = React.useState(1);
  const onCountClick = () => {
    setCount((preState) => {
      const newState = preState + 1;
      return newState;
    });
  };
  const callback = () => {
    console.log(count);
  };
  return (
    <div>
      <button onClick={onCountClick}>{count}</button>
      <Demo callback={callback} />
    </div>
  );
};

class App extends React.Component {
  render() {
    return <Container />;
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

demo链接：https://codesandbox.io/s/reac...

先点击count改变count的值，再点击scroller打印count，发现每次打印的都是初始值。

求解答

Answer 1

Demo组件里利用useRef保存变化的callback:

const Demo = (props) => {
  const { callback } = props;
  const [scroller, setScroller] = React.useState(null);
  const scrollerCallback = React.useRef(callback);

  const onScrollerClick = () => {
    scroller.doSomething();
  };

  React.useEffect(() => {
    scrollerCallback.current = callback;
  }, [callback])

  React.useEffect(() => {
    setScroller(
      new Scroller(() => {
        scrollerCallback.current()
      })
    );
  }, []);

  return (
    <div>
      <button onClick={onScrollerClick}>scroller</button>
    </div>
  );
};

还有一点：组件Demo里没必要使用state保存scroller值（因为看本Demo的用法更像是在使用成员变量）：

const Demo = (props) => {
  const {callback} = props;
  const scroller = React.useRef(null);
  const scrollerCallback = React.useRef(callback);

  const onScrollerClick = () => {
    scroller.current.doSomething();
  };

  React.useEffect(() => {
    scrollerCallback.current = callback;
  }, [callback])

  React.useEffect(() => {
    scroller.current = 
      new Scroller(() => {
        scrollerCallback.current()
      })    
  }, []);

  return (
    <div>
      <button onClick={onScrollerClick}>scroller</button>
    </div>
  );
};

Answer 2

只需要重新定义Demo组件

const Demo = (props) => {
  const [scroller, setScroller] = React.useState(null); 
+ const currentProps = React.useRef(props);

  const onScrollerClick = () => {
    scroller.current.doSomething();
  };
  
+ React.useEffect(() => {
+   currentProps.current = props;
+ });
  
  React.useEffect(() => {
    setScroller(
      new Scroller(() => {
+       const { callback } = currentProps.current;
        callback();
      })
    );
  }, []);
  
  return (
    <div>
      <button onClick={onScrollerClick}>scroller</button>
    </div>
  );
};

Answer 3

React.useEffect(() => {
    setScroller(
      new Scroller(() => {
        console.log(count.i);
      })
    );
  }, [count]);

添加useEffect依赖项