Day 02 - 那个 React Hook

如果有错误，欢迎留言指教~ Q_Q

什麽是 Hook?

Hook 是 React 16.8 中增加的新功能。它让你不必写 class 就能使用 state 以及其他 React 的功能。

Hook 是 function，他让你可以从 function component「hook into」React state 与生命周期功能。Hook 在 class 里面没有办法用——他们让你不用 class 就能使用 React。

需要 Hook 的理由

理由1: 方便共用拥有状态逻辑的程序码

在 class 共用状态逻辑很麻烦

通常用 render props 或用 provider ...等等传递状态

但可能在各个 component 依赖包来包去的情况下

共用逻辑也可能需要改来改去，也会因为层级的关系，维护不便

在 Hook 就可以自己创个 customHook → 状态直接分享使用

理由2: 不再被 lifecycle 绑手绑脚

在 lifecycle 里面，常常不相关的逻辑会放在同一个方法

相同逻辑的程序码又因为 lifecycle 分散在不同地方

增加了维护的麻烦，和在 Component 之间重用 Stateful 的逻辑的困难

理由3: 可以不用烦恼 this

常常搞不清楚 this (还是只有我!?)

hook 是 function， function 没有 instance 所以没有 this

所以不需要再 bind(this) 去设定 state 和 event

理由4:程序码可以..少一点(我就懒)

Class Component

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          ...
        };
    }
    
    ...
};

Function Component(React Hook)

const App = () => {
    const [value, setValue] = useState({
        ...
    });

};

总之

在 Hook 不要想着生命周期，只要想着元件的状态，和会呈现的效果

但 React 目前没有计画要 移除 class，所以还是要会 XD