React Hook 学习笔记

阅读 React Hook 简介

可以在 class 以外的地方使用 state 等特性，例如，在函数组件中使用 state。
React Native 将在下一个稳定版支持 Hook
Hook 优势
- API 完全可选
- 向后兼容
- 16.8.0 版本可用
- 渐进式，可与已有代码协同
不会因为 Hook 就将 class 组件从 React 中移除。
Hook 会更有助于你理解 React，提供了强大的 API，以便于你更好的组合已知的 React 特性。
Hook 主要解决的问题：
- 组件间状态难以复用，而使用 HOC 或者 Render Props 对项目侵入性又很大，会有嵌套地狱的问题。
- 为复杂的组件解耦，减轻组件生命周期的压力。
- class 是学习 React 的困难之一，还有 JavaScript 中 this 的指向问题。
- 何时使用函数组件，何时使用 class 组件的分歧

阅读 React Hook 概览

State Hook 的示例。可以在函数组件中使用 state。

import React, { useState } from 'react';

function Example() {
    // 声明一个叫 "count" 的 state 变量。
    const [count, setCount] = useState(0);

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

阅读示例，其中 useState 就是 Hook。参数为 state 的初始值。

声明多个 state，其中 useState 语法用到了数组解构，这样可以为 state 起名字。

function ExampleWithManyStates() {
  // 声明多个 state 变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Effect Hook 的示例。可以在函数组件中增加操作副作用相关的能力。

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

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

    // 相当于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {
        // 使用浏览器的 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 可以生成副作用函数。
在函数组件中可以实现副作用函数相关事情，比如异步请求等。

使用 useEffect 时返回一个函数，可以清除副作用。

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

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

副作用函数 useEffect 与 useState 相同，都可以多次调用。
Hook 的使用规则
- 只能应用于函数体最外层（即不能应用于循环，条件及子函数中）
- 只能在函数组件中使用 Hook

创建自己的 Hook 官方给出的自定义 Hook 的例子，这是一段抽离状态逻辑的代码，可以实现在多个函数组件中复用。 这点在 class 组件中无法做到

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;
}

自定义 Hook 其实就是官方 Hook 的组合体。注意：自定义 Hook 请和官方一样使用 use 开头。 useSomething 的形式。
除了 state 和 effect，官方还有其他的 Hook，如：useContent，useReducer 等。

QC-L / blog

React Hook 学习笔记 #30

React Hook 学习笔记

阅读 React Hook 简介

阅读 React Hook 概览