学习 Hook（ Day14 ）

在截稿为止， React 最新的版本是 v17.0.2 ，而从 React 16.8.0 是第一个支援 Hook 的版本

对一个初学 React 的自己来说，很困惑的就是 function component 跟 class comonent 的差异，很难决定到底要写什麽。而自从 React 16.8.0 支援了 Hook 的版本，两种 component 的使用选择上又有了新的变化。下面系列文章开始学习 Hook 的部分，以下是学习 Hook 的想法：

1. 理解 Hook 要解决什麽问题
2. 认识 Hook 语法写法
3. 使用 Hook ，跟 React 一起成长
4. 认识其他概念，ex： render props、higherorder component

理解 Hook 要解决什麽问题

官方在 React 使用一段时间後，发现一个使用上的问题，於是提出 Hook 作为解法。
以下问题罗列，而列出的问题如何用 Hook 去实际解决也会在慢慢认识 Hook 之後了解。

• 在 Component 之间重用 Stateful 的逻辑很困难
  => 打造你自己的 Hook

• 复杂的 component 变得很难理解
  => 使用 Effect Hook

• Class 让人们和电脑同时感到困惑，开发者需了解 this 运作，并在最佳化会遇到的困难
  => 拥抱 function，让 function 更完整支援 React 功能

认识 Hook 语法写法，我的第一个 Hook

import React, { useState } from 'react';

function Vender() {
  const [banana, takeBanana] = useState(0);

  return (
    <div>
      <p>I have {banana} bananas</p>
      <button onClick={() => takeBanana(banana + 1)}>
        I take it!
      </button>
    </div>
  );
}

Codepen

使用 Hook ，跟 React 一起成长

1. 目前 React 没有计画要移除 Class。
2. Hook 向下相容，实际上还是常能遇到 Class 与 Hook 混用
3. Hook 与 Hook 的其他问题

以上今天。

参考资料：
React Functional Component 与Class Component的差异