React 16.7.0-alpha hooks 之总体预览

转载于免费视频网 www.rails365.net

以前咱们介绍了使用hooks的缘由，在开始介绍api以前，如今咱们先来总体的预览下这些api。 从上篇的介绍能够知道，Hook是向后兼容的，有react开发经验的你看起来会更顺畅。

是一个快节奏的概述。若是你感到困惑，能够看下上面提到的介绍里的动机：

详细说明 阅读动机以了解咱们为什么将Hooks引入React。

State Hook

看下面的例子，他是一个计数器

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>
  );
}
复制代码

在这里useState是一个Hook（咱们将在稍后讨论这意味着什么）。能够看到，在这个函数组件里，咱们向他添加一些本地状态。React将在从新渲染之间保留这状态。 useState返回一对：当前状态值(count)和容许你更新状态的函数(setCount)。你能够从事件处理程序或其余位置调用此函数。这个函数相似于类中的this.setState，可是它不会将旧状态和新状态合并在一块儿。（咱们将在使用State Hook中显示一个将useState与this.state进行比较的示例。）

useState的惟一参数是初始状态。 在上面的例子中，它是0，由于咱们的计数器从零开始。请注意，与this.state不一样，此处的状态没必要是对象 - 尽管能够是任何你想要的。初始状态参数仅在第一次渲染期间使用。

声明多个state

你能够在一个组件中屡次使用State Hook：

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}
复制代码

数组解构语法容许咱们为经过调用useState声明的状态变量赋予不一样的名称。这些名称不是useState API的一部分。相反，React假定若是屡次调用useState，则在每次渲染期间以相同的顺序执行。咱们将回到为何这种方法有效以及什么时候有用。

什么是Hook

钩子是容许从功能组件(function component)“挂钩”React状态和生命周期功能的功能。钩子在类内部不起做用 - 它们容许你在没有类的状况下使用React。 (咱们不建议你在一晚上之间重写现有组件，但若是你愿意，能够开始在新组件中使用Hook。）

React提供了一些像useState这样的内置Hook。你还能够建立自定义Hook以在不一样组件之间重用有状态行为。咱们先来看看内置的Hooks。

详细说明 你能够在使用State Hook中了解更多信息。

Effect Hook

你以前可能已经从React组件执行数据提取，订阅或手动更改DOM。咱们将这些操做称为“反作用”（或简称为“效果”），由于它们会影响其余组件，而且在渲染过程当中没法完成。

Effect Hook中的useEffect增长了在功能组件执行反作用的功能。它与React类中的componentDidMount，componentDidUpdate和componentWillUnmount具备相同的用途，但统一为单个API。(咱们将在使用Effect Hook时显示将useEffect与这些方法进行比较的示例。）

例如，下面的组件将在React更新DOM后设置文档标题：

import { useState, useEffect } from 'react';

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

  // 相似componentDidMount 和 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运行你的‘效果’函数当刷新对DOM的更改后(你能够认为是render以后)。 效果在组件内声明，所以能够访问其props和state。默认状况下，React在每次渲染后运行效果 - 包括第一次渲染。 （咱们将更多地讨论使用effect hook与类生命周期的比较。）

Effects还能够经过指定返回函数来清理他们。看下面的这个例子：

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

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

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

在这个示例中，当组件卸载时，以及在因为后续渲染而从新运行效果以前，React将取消订阅咱们的ChatAPI。（若是你愿意的话，若是咱们传递给ChatAPI的props.friend.id没有改变，有办法告诉React跳太重新订阅。）

就像使用useState同样， 你也能够在组件中使用多个效果：

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);
  }
  // ...
}
复制代码

Hooks容许你经过哪些部分相关（例如添加和删除订阅）来组织组件中的反作用，而不是基于生命周期方法强制拆分。

详细说明 你能够在使用Effect Hook中了解更多信息。

Hooks的规则

钩子是JavaScript函数，但它们强加了两个额外的规则：

• 只能在顶层调用Hooks。不要在循环，条件或嵌套函数中调用Hook
• 仅从React功能组件调用Hooks。 不要从常规JavaScript函数中调用Hook。 （还有另外一个有效的地方叫Hooks - 你本身的定制Hooks。咱们立刻就会了解它们。）

详细说明 你能够在Rules Hook中了解更多信息。

Custom Hooks

有时，咱们但愿在组件之间重用一些有状态逻辑的部分。传统上，这个问题有两个流行的解决方案：高阶组件和渲染道具。Custom Hooks容许你执行这样的操做，而且无需向树中添加更多组件。在上面咱们介绍了一个调用useState和useEffect Hooks的FriendStatus组件来订阅朋友的在线状态。假设咱们还但愿在另外一个组件中重用此订阅逻辑。 首先，咱们将这个逻辑提取到一个名为useFriendStatus的自定义Hook中：

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';
}
复制代码

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

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

这些组件的状态是彻底独立的。钩子是重用有状态逻辑的一种方式，而不是状态自己。 事实上，每次调用Hook都有一个彻底隔离的状态 - 因此你甚至能够在一个组件中使用相同的自定义Hook两次。

custom hook更像是一种约定而非功能。若是函数的名称以use开头而且它调用其余Hook，咱们说它是一个Custom Hook。useSomething命名约定是linter插件如何使用Hooks在代码中查找错误的。

详细说明 你能够在Writing Custom Hooks中了解更多信息。

Other Hooks

你可能会发现一些不太经常使用的内置Hook颇有用。例如，useContext容许订阅React上下文而不引入嵌套：

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

useReducer容许使用reducer管理复杂组件的本地状态：

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);
  // ...
}
复制代码

详细说明 你能够在 Hooks API Reference.中了解更多信息。

本文原文档

下一章节state请前往此处