React 16.8 新特性Hook

React 16.8 新特性Hook

1. Hook可以在不使用class情况，用state和其他的react特性，完全使用function的形式书写组件，可读性更高了

2. 另外要记住Hook：
   完全可选的—即无序重写已有代码，可以在任何组件中直接使用Hook
   100% 向后兼容的—不包含任何破坏性改动
   没有计划从React中移除class，对Hook的使用更多是采用渐进式策略
   Hook不会影响你对React概念的理解

3. 发明Hook的动机
   React的组件没有可复用性的功能（例如，把组件连接到 store），你只能使用 render props 和 高阶组件的方法解决此问题，但这很容易形成由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”，这提醒了React开发成员需要为React共享状态逻辑，提供更好的原生途径。
   可以使用Hook从组件中提取状态逻辑，使你无序修改组件结构的情况下，测试和复用状态逻辑。

Hook API

1. useState

const [state, setState] = useState(initialState);

返回state和更新state的setState，且setState 只能在 子组件调用或者元素中调用，不能在生产setState的函数里调用

function Counter({i}) {
  const [count, setCount] = useState(i);
  setCount(50)；//这一行这样是错误
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(50)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}