[React Hooks 翻译] 2-8 初探Hooks

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个时刻调用：

1. 组件unmount的时候
2. 前面说过，反作用函数在每次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点

1. 在最上层调用Hook。不能在循环、判断或者嵌套的函数中调用
2. 只在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);
  // ...
复制代码