React Hooks 本质

React Hooks 本质是自变量与因变量：

useState	定义自变量
useMemo 与 useCallback	定义无副作用的因变量
useEffect	定义有副作用的因变量
useReducer	方便操作更多自变量
useContext	跨组件层级操作自变量
useRef	用于保存标记变量（标记变量既不是自变量，也不是因变量，只是缓存这个路径上的数据）， 增加组件灵活性

function App() {
  const [x, setX ] = useState(0);

  // const y = 2 * x + 1;
  const y = useMemo(() => 2 * x + 1, [x]); // x 不变时，使用缓存的值

  // const changeX = () => setX(x + 1);

  const changeX2 = useCallback(() => { setX(x + 2) }, [x]);

  useEffect(() => {
    document.title = y + '';
  }, [y])

  return (
    <div className="App">
      <button onClick={changeX2}>change x</button>
      x: {x},
      y: {y}
      <hr></hr>
      <button onClick={counterState.addCount}>Add Count</button>
      Hello world {counterState.doubleCount}
    </div>
  );
}