[React Hooks 翻译] 2-8 初探Hooks这个例子上一篇有提到过，这里useState就是一个Hook（待

Hooks有很多种，比如

State Hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

这个例子上一篇有提到过，这里useState就是一个Hook（待会会讨论什么是Hook）。我们在函数内部调用这个Hook，给组件添加了一个内部state，在re-render的时候React会保留这个state。

useState的参数：
- useState的唯一的参数是state的初始值。这个初始值不必须是object，可以是任意类型的值
useState的返回值：返回了2个东西
- 当前state
- 一个可以更新state的函数。这个函数和setState很像，不过它不会将旧state和新state给merge到一起。

声明多个state变量

一个组件里可以声明多个state变量

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

啥是Hook？

Hook就是一个钩子函数，用Hook就能从函数组件里hook到React state和生命周期。

Hook不能在class里使用

React提供了许多内置Hook，你也可以写自定义Hook。我们先学习内置Hook

Effect Hook（副作用钩子）

啥是副作用？
- 比如说获取数据、订阅消息、手动修改DOM，这种操作就叫副作用（“side effects” ( 或者简称“effects”)）。
为啥叫副作用？
- 第一，这些操作可能影响其他组件
- 第二，不能在render的时候执行这些操作。

Effect Hook， useEffect，给函数组件提供了执行副作用的能力。useEffect的用处和class组件里的componentDidMount, componentDidUpdate, and componentWillUnmount一样，但是不像class组件里的3个API，useEffect被整合成了一个单独的API。

举个例子，下面这个组件在React更新DOM后会更改文档标题

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect的参数就是副作用函数，这个函数在React Update之后执行。

useEffect要在组件内部定义，这样才能获取到组件的props和state。

默认情况下，react在每次render的过程中（包括初次渲染）都会执行副作用函数。

Effect Hook接收的副作用函数的返回值可以是一个函数，这个函数告诉React如何清理这些副作用。

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

return的函数将在2个时刻调用：

组件unmount的时候
前面说过，副作用函数在每次render的过程中都会执行，而副作用函数执行之前，将会调用这个return的函数（当然如果传递给ChatAPI的props.friend.id没有改变，也有办法告诉React跳过重新订阅）

类似useState，一个组件可以定义多个effect

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  // ...

Hook的规则

有2点

在最上层调用Hook。不能在循环、判断或者嵌套的函数中调用
只在React 函数组件和你自定义的Hook里调用Hook

构建自定义Hook

前面介绍了一个调用useState和useEffect Hooks的FriendStatus组件来订阅朋友的在线状态。假设我们还希望在另一个组件中重用此订阅逻辑。

首先，我们将这个逻辑提取到一个名为useFriendStatus的自定义Hook中：

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

useFriendStatus将friendID作为参数，返回isOnline。

现在我们可以从两个组件中使用它：

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

Hook是重用的是状态逻辑而不是状态本身。
- Hook是重用的是状态逻辑而不是状态本身。每次调用Hook得到的状态完全独立，所以可以在一个组件中多次调用相同的自定义Hook。
使用use作为自定义Hook的名字的开头
- 自定义Hook更像是一种约定（convention）而非特性（feature），如果一个函数是”use“开头的，并且调用了其他Hook，那我们就称之为一个自定义Hook。
- useSomething这种命名约定能在使用Hook的时候帮助linter插件定位bug。

其他Hook

useContext能在不引入嵌套的情况下订阅React上下文

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

useReducer能用reduce管理复杂组件的本地状态

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