React Hook的使用

useState hook的使用

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

Hook配合函数组件即可取代class

首先引入 React 中 useState 的 Hook，
Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。

什么时候我会用 Hook？ 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook。

const [count, setCount] = useState(0) 的原因。这与 class 里面 this.state.count 和 this.setState 类似

useEffect hook 的使用

effect hook 可以在函数组件中执行副作用操作。数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

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

一般有两种常见副作用操作，需要清除和不需要清除

无需清除的effect

在react更新DOM之后运行一些额外的代码。如发送网络请求，手动变更DOM，记录日志等执行完之后就可以忽略了

通过使用useEffect 就是告诉react组件需要在渲染后执行某些操作，react会保存传递的函数，并且在执行DOM更新之后调用。

userEffect会在每次渲染后执行，指的是第一次渲染和每次更新之后都会执行。

需要清除的effect

如订阅外部数据源，需要清除，防止引起内存泄漏

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

如果effect 返回一个函数，React 将会在执行清除操作时调用它

useEffect会在调用一个新的 effect 之前对前一个 effect 进行清理

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

如果count 值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可