React v16.7 之 Hooks

2018-12-25 本文已影响0人 bcb84a30ed08

Hooks are an upcoming feature that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha.

What

Hooks 是 React 函数组件内的一类特殊函数，使开发者能在 function component 里继续使用 state 和 lifecycle。通过 Custom Hooks 可以复用业务逻辑，从而避免添加额外的components。

Why

过去我们使用React时，component 基本分为两种：function component 和 class component 。其中function component就是一个 pure render component，不存在 state 和 lifecycle 。function component 使组件之间耦合度降低，但一旦需要 state 或 lifecycle ，就需要变成 class component 。而 class component 也会带来一些缺点：

React 组件树过于臃肿

单向数据流使组件间的通信必须一层一层往下传，当有些状态不适合使用 Redux 这种 global store 的情况下，此时组件之间的逻辑复用和沟通就会变得十分困难。为此，过去我们会使用各种 HOC（高阶组件）来传递状态。这就导致了当应用规模越来越庞大的时候，会多了很多无关 UI 的 wrapper 组件，也就使得 React 组件树变得越来越臃肿，开发和调试效率随之变低。

Write

了解了Hooks的基本知识，接下来就是如何去使用 Hooks API 了。Hooks 主要分为三种：

State Hook （在 function component 使用 state）
Effect Hook （在 function component 使用 lifecycle 和 side effect ）
Custom Hook （通过自定义Hook来复用逻辑）

WX20181224-184244@2x.png

State Hook

官方 Example:

import { 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>
  );
}

Hook 的本质实际上就是一个特殊的函数，通常以"use"开头。这里的 useState 就是一个Hook，通过它可以实现在组件内使用state。useState 会返回一个pair：分别是当前 state 的值和修改这个 state 的函数。用法有点类似 class component 里的 this.setState，只是这里不会合并 state 对象，而且注意到没，这里的 useState 的初始值是0，跟 this.state 不同在于它不需要是一个 Object。

官方有个例子对比 useState 与 this.state 的。（传送门：https://reactjs.org/docs/hooks-state.html）

多个 state 变量

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

你完全可以声明多个 useState，一点问题都木有！这种做法带来的好处是：我们的 state 将不会变得非常臃肿，每个 state 都非常直观，独立。

Effect Hook

我们经常在 React 组件中进行拉取数据、订阅或操作DOM，这种行为被称为 "side effects"（副作用），这种行为通常只能在生命周期中执行，而不能在 render 里。

React 通过 useEffect 来解决这样的问题，具体怎么用我们看看例子：

import { 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>
  );
}

这种做法相当于把 React classes 里的 componentDidMount ，componentDidUpdate，componentWillUnmount 合并成了一个。

由于 Hooks 是定义在最外层函数的，所以这里是能访问到 props 和 state 的，它默认会在每一次 render 后都会被调用（包括第一次）。

同样的，官方有个例子对比了 useEffect 和 class lifecycle 的。（传送门：https://reactjs.org/docs/hooks-effect.html）

cleanup

通常我们的大部分 effect 行为都是不需要清理，比如网络请求、DOM操作或者日志记录等。但如果我们在 effects 进行了类似外部数据订阅这样的操作，那么我们就需要在 Unmount 前取消订阅。针对这种场景，可以通过在 useEffect 中返回一个函数的方式进行清理。此处应该有代码：

import { 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);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

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

乍一看，使用 Hook 的方式相对于 class component 只是代码写少点而已，但实际上它带来的好处可不止这些。如果用 class component 的话，我们需要在 componentDidMount 订阅 props.friend.id 的状态，然后在 componentWillUnmount 中取消订阅。

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

但这种做法可能会引发bug（试想一下，如果 friend prop 变了会怎样？）。这种情况下，页面上显示的状态就不是当前这个 friend 的啦~ 所以这是一个bug，解决的方式就是在 componentDidUpdate 中先进行 unsubscribe，再重新 subscribe。

componentDidUpdate(prevProps) {
    // Unsubscribe from the previous friend.id
    ChatAPI.unsubscribeFromFriendStatus(
      prevProps.friend.id,
      this.handleStatusChange
    );
    // Subscribe to the next friend.id
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

在实际开发中，我们可能经常会没考虑到这种情况。那么现在有了 Hook，你可以不用担心了！

性能优化之 Skipping effects

每次 render 都会 cleanup 或执行 effect，这可能会导致性能问题。在 class component 中我们通常会在 componentDidUpdate 里进行对比判断。而在 Hook 里，我们可以通过给 useEffect 传递第二个参数（数组形式）来选择 Hook 的触发时机，

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

同步的 useLayoutEffect

必须说明的是，useEffect 是异步的，即它不会阻塞浏览器渲染页面，因为大多数情况下，这些 effects 都不需要同步执行。在极少数的场景下，可以选择用 useLayoutEffect。它会在 re-render 后同步执行，阻塞浏览器进行渲染。

Custom Hook

过去我们在组件中复用逻辑的通常做法是使用高阶函数 ( high-order component ) 和 render props。如今有了 Hooks，我们可以避免添加更多的组件到我们的组件树中了。

我们把上面 FriendStatus 稍加改动。

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

它对外接受一个 friendId 作为参数，然后返回具体状态。而在其他组件里引用也非常简单：

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

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

这样，复用了逻辑而又不需要引入新的 state，简直完美！

其他 built-in Hooks

还好很多内置的 Hooks，如：

useContext（替代<Context.Consumer> 使用render props 的写法）

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

useReducer （相当于组件自带 redux reducer，负责 dispatch action 并更新 state）

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

注意事项

在最外层函数使用 Hooks ，不要在循环块、条件块或函数内调用 Hooks；
只在 React function component 里使用 Hooks（除非是Custom Hooks，否则不要在普通函数中使用 Hooks）

最后总结一下

在 React 里，Hooks 就是一系列的特殊函数，在 function component 内部“勾住” 组件的 state 和 lifecycle。Hook 是向后兼容的，但官方不推荐大家将旧代码的 class component 都改成 Hook，大家可以在新代码中体验一下这种写法。针对 Hooks 新特性的官方文档很详细，这里限于篇幅，就不过多讲了，推荐大家去看官方文档。

掰掰~

参考文档：https://reactjs.org/docs/hooks-intro.html