import React, { useCallback, useState } from 'react';
import SendButton from './SendButton';

export default function AsyncHook() {
  const [a, setA] = useState(0);
  const async = () => {
    setTimeout(() => {
      setA((c) => c + 1);
      window.console.log(a);
      setA((c) => c + 1);
      window.console.log(a);
      setA((c) => c + 1);
      window.console.log(a);
      // react17: 結(jié)果加3, renderTime 3次
    }, 0);
  };

  const async2 = () => {
    setTimeout(() => {
      setA(a + 1);
      window.console.log(a);
      setA(a + 1);
      window.console.log(a);
      setA(a + 1);
      window.console.log(a);
    }, 0);

    // react17: 結(jié)果+1, renderTime 調(diào)用2次
  };

  const sync = () => {
    setA((c) => c + 1);
    window.console.log(a);
    setA((c) => c + 1);
    window.console.log(a);
    setA((c) => c + 1);
    window.console.log(a);
    // react17: 結(jié)果+3, renderTime 調(diào)用1次
  };

  const sync2 = () => {
    setA(a + 1);
    window.console.log(a);
    setA(a + 1);
    window.console.log(a);
    setA(a + 1);
    window.console.log(a);
    // react17: 結(jié)果+1, render time調(diào)用一次
    // React18: 結(jié)果+1, render time調(diào)用一次 (上述幾個demo表現(xiàn)與這個一致)
  };

  window.console.log('render times', a);

  const [text, setText] = useState('');

  const onClick = useCallback(() => {
    window.console.log('send: ', text);
  }, []);

  const onTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  return (
    <div>
      <div>{a}</div>
      <button onClick={async} className="bg-teal-300">
        async
      </button>
      <button onClick={async2} className="bg-teal-300">
        async2
      </button>
      <button onClick={sync}>sync</button>
      <button onClick={sync2}>sync2</button>
      <hr />
      <input type="text" onChange={onTextChange} />
      <SendButton onSendMessage={onClick} />
    </div>
  );
}
/** 在React17中結(jié)果是一致的
 * 異步async render times會調(diào)用三次 結(jié)果+3
 * 異步async2 render times會調(diào)用2次, 結(jié)果加1

 * 同步: render times只調(diào)用一次, 結(jié)果+3
 * 同步: render times只調(diào)用一次, sync2 結(jié)果+1
 *
 * 結(jié)果都是增加三次
 *
 * react18中,
 * 異步 render times會調(diào)用一次
 * 同步: render times只調(diào)用一次
 * 行為保持了一致
 */