React Hooks常规使用

useState

useState 第一个值用来取值， 第二个值为一个方法，用来赋值和更新视图

import React, {
    useState } from 'react';

const Hooks = (): any => {
   
    const [msg, setMsg] = useState<string>('啥也be是');
	
	const Click = (): void => {
   
		setMsg(Math.random().toString())
	}

    return (
        <>
            <p onClick={
   () => Click()}>{
    msg }</p>
        </>
    )
}

export default Hooks

useEffect

有时候，我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 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>
  );
}

• useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。

• 为什么在组件内部调用 useEffect？ 将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。

• useEffect 会在每次渲染后都执行吗？ 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它。）你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

清除副作用
你可能认为需要单独的 effect 来执行清除操作。但由于添加和删除订阅的代码的紧密性，所以 useEffect 的设计是在同一个地方执行。如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它：

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