hooks note

[laclys]

function Test1(props: { onChange: (res: string) => void }) {
  return (
    <input
      onChange={(e) => {
        props.onChange(e.target.value);
      }}
    />
  );
}

function Test1Wrapper() {
  let a = "";
  const [b, setB] = useState(0);
  useEffect(() => {
    const i = setInterval(() => {
      setB((res) => ++res);
    }, 1000);
    return () => {
      clearInterval(i);
    };
  }, []);
  return (
    <>
      <Test1
        onChange={(res: string) => {
          a = res;
        }}
      />
      {b}
      <button
        onClick={() => {
          console.log(a);
        }}
      >
        show a
      </button>
    </>
  );
}

直接写变量 - 时有时无 -> 因为 React 中，类型为 Dispatch 的方法（useReducer 的 dispatch 和 useState 的 setState），都会导致当前函数重新运行

而此处的 a 是个变量，它会在函数运行时重新赋值为 “”，导致之前的状态丢失

因此，如果 log 按钮点击前发生了任何其他依赖的状态变化（包括 context，state，props），a 都会被重置