React Hooks 入门

之前就听过React的新特性Hooks，今天有空来学习了解一蛤~

参考资料：

• React中文文档

概述

Hooks 是一项新功能提案，可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。目前还在讨论中。

简单来说，这个提案对React的函数式组件进行了加强。之前在React中的三种组件及其区别中提高过：函数式组件没有生命周期和内部状态，所以一般只做单纯的渲染。而Hooks就为函数是组件增加了这两点。

用法

通过代码和注释最能直观的搞清楚它的用法

// 使用前需要引入，同一个组件中允许有多个useState和useEffect
// useState: State(状态) Hook，提供内部状态功能
// useEffect: Effect(影响) Hook，提供类似生命周期的功能
import { useState, useEffect } from 'react';

// 例如做一个计数器组件
function Example() {
  // useState传入初始值0，返回一个长度为2的数组
  // 使用解构赋值，为数组中的两项命名
  // 第一项是变量名，count。初值为传入的0
  // 第二项是改变这个变量的方法，setCount, 调用他时候的参数是count的新值
  const [count, setCount] = useState(0);

  // Similar to :
  // useEffect类似componentDidMount 和 componentDidUpdate
  // 会在组件每次渲染(包括第一次和之后的更新)后执行其中的逻辑
  useEffect(() => {
    // 例如动态更改浏览器页签的title
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      // 使用变量时直接用变量名, count
      <p>You clicked {count} times</p>
      // 使用修改方法时,直接传入新的值
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hook的规则

Hook 是 JavaScript 函数，但强加了两个额外的规则：

• 只能在顶层调用 Hook，不要在循环、条件或嵌套函数中调用 Hook。
• 仅从 React 函数式组件中调用 Hook。不要从常规 JavaScript 函数调用 Hook。（还有另一个有效的地方来调用 Hook，即你的自定义 Hook。）

自定义 Hooks

有时，我们希望在组件之间重用一些 有状态（stateful） 逻辑。 传统上，这个问题有两个流行的解决方案：高阶组件 和 渲染属性(props)。 自定义 Hooks 允许您执行这样的操作，但无需向树中添加更多组件。

其他 Hooks

您可能会发现一些不太常用的内置 Hook ，但是很有用。 例如，useContext 允许您订阅 React context 而不引入嵌套：

function Example() {
  const locale = useContext(LocaleContext);
  const theme = useContext(ThemeContext);
  // ...
}

还有，useReducer 允许您使用 reducer 管理复杂组件的本地 state(状态) ：

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);
  // ...

以上是Hooks的基本用法，他还有很多其他特性，这里仅做入门，回头再深入学习。