react-hook 详解及使用-2

react-hook 详解及使用-2

此篇文章主要介绍 react-hook 详解及使用-2

注意：

React 16.8.0 是第一个支持 Hook  的版本。升级时，请注意更新所有的 package，包括 React DOM。 React Native 从 0.59 版本开始支持 Hook。

Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。

---

1.react-hook 之 什么是 HOOK？

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。

---

2.react-hook 之 为什么要使用 HOOKS

• Hook 使你在无需修改组件结构的情况下复用状态逻辑
• Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
• Hook 使你在非 class 的情况下可以使用更多的 React 特性

---

3.Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
• 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

---

4.Hook 常见钩子

Effect Hook

第一次渲染之后和每次更新之后都会执行

Effect Hook 可以让你在函数组件中执行副作用操作

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

提示：

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

无需清除的 effect

在 React 更新 DOM 之后运行一些额外的代码

import React, { useState, useEffect } from 'react';
function Example() {     const [count, setCount] = useState(0);     useEffect(() => {          document.title = `You clicked ${count} times`;     });     return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

详细说明

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

需要清除的 effect

订阅外部数据源

import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
    const [isOnline, setIsOnline] = useState(null);
    useEffect(() => {   
        function handleStatusChange(status) {  
            setIsOnline(status.isOnline);  
        }   
        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';
}

函数是 effect 可选的清除机制

React 会在组件卸载的时候执行清除操作

小结

了解了 useEffect 可以在组件渲染后实现各种不同的副作用。有些副作用可能需要清除，所以需要返回一个函数

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

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

其他的 effect 可能不必清除，所以不需要返回。

useEffect(() => {     document.title = `You clicked ${count} times`;
  });

effect Hook 使用同一个 API 来满足这两种情况。

---

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

友情链接：https://www.ccwisdom.com/industrynews/