充分理解并运用React的Hook是必须要做到。下文将揭露Hook运作原理、运作方式、运作效果记录个人学习笔记。

什么是Hook

这里直接摘抄React官网

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

这里解读一下，Hook是React16.8版本发布为方便函数式组件的React函数。
帮助函数式组件在组件内部使用React提供的特性

为什么要用Hook

Hook直译为钩子，可以理解为到运行到指定地步时自动调用的函数。
这种思想和方式也是被越来越多的框架接纳尤其是现在很流行的Vue。
Hook式编程可以让你按照代码关注点而进行整体编写，将原本分散在各周期的同一逻辑块的代码聚合到一起。

怎么用Hook

useState


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

State的基本概念和作用这里简单介绍下。

State可以理解为作用在函数组件内部的仓库，并且会根据数据的改动做出异步响应式更改。

以上面的代码为例。

import React下的useState函数
在函数式组件内部申明Count和setCount(解构语法)
在JSX中借助{}使用
在setCount中进行更改。值得一提的是其渲染模板会响应式进行更改，每当count变化是会重新进行渲染
(这里不用担心重新渲染会占用很多时间和内存,React的diff算法很智能的！)
tips
每个组件会维护自己的State不会和其他组件内同名State产生联系。（闭包！）
为避免作用域混淆，只能在函数式组件顶部申明(如果用react的构建工具创建项目会自动安装eslint)
声明state的时候是按照顺序执行，所以不要在条件语句或循环语句中声明state。

useEffect

此项Hook类似Vue的watchEffect。传入一个函数。每当dom和依赖源变化的时候异步更新。
通过return 一个函数，当组件卸载的时候执行。

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); 
      //组件销毁时执行
      return function cleanup() {      
          ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    
      };  
  });
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

这里假设有一个chatAPI你需要根据props里的ID进行实时查询好友是否在线。
使用useEffect可以很好的看明白整个代码执行的顺序和逻辑。
这里有一个Hook的常见闭包问题，这里不多叙述大家可以看看官网上面详细的解释和其他博客。
useEffect(函数,[依赖源]) 当你不想要任何state里的值发生变化都重新执行一次那么可以在第二个参数直接写上依赖源数组。
tips
一定一定一定不要把非State数据放在依赖源。否则会发生你不想要看到的渲染界面。
如果你只想它在组件挂载的时候执行一次而不必每次state更新都重新执行，可以添加空数组[]。
让React知道你只想让它在组件挂载的时候执行一次，销毁的时候执行副作用函数。

React学习笔记：初识Hook只useState和useEffect（三）

什么是Hook

为什么要用Hook

怎么用Hook

useState

useEffect