持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

Hook介绍

要启用Hooks，所有React软件包都必须为16.8.0或更高版本

钩子是允许从功能组件"挂钩"React状态和生命周期功能的功能。钩子在类内部不起作用——他们允许你在没有类的情况下
使用React

'React提供了一些useState这样的内置Hook，你还可创建自定义Hook以在不同的组件之间重用有状态行为。

Hook是一些可以让你在函数组件里钩入React state及生命周期等特性的函数。Hook不能在class组件中使用——这使得你
不得不使用class也能使用React。（不推荐把已经写好的组件全部重写，但可以在新组件中使用Hook）'
    
hook是javascript函数，但他强调了两个额外的规则
    只能在顶层调用Hooks，不要再循环，条件或者嵌套函数中调用Hook
    仅从React功能组件调用Hook，不要从常见javascript函数中调用

useState语法

import React, { useState } from 'react';
export function Conter(){
    const [count,setCount]=useState(0);
    return(
        <div>
             <p>测试{count}</p>
            <input type='button' value='加一' onClick={() => setCount(count+1)} />
            <input type='button' value='减一' onClick={() => setCount(count-1)} />
        </div>
    )
}

useEffect语法

useEffect(didUpdate)：
    接受包含命令式（可能是有效代码）的函数
    函数组件（成为React的呈现阶段）的主体中不允许出现Mutations（业务逻辑），subscriptions（监听），
timers（时间缓存），logging（日志），和其他副作用。这样做将导致混淆错误和不一致的用户界面

    从React组件执行数据提取，订阅或手动更改DOM。我们将这些操作成为“副作用”（简称为“效果”）因为他们会影响
其他组件并且在渲染过程中无法完成

    Effect Hook中的useEffect增加了功能组件执行副作用的功能。他与React类中的componentDidmount，
componentDidUpdate和componentWillUnmount具有相同的用途，但统一为单个API

基本hook-useEffect

第一个参数是函数（这里叫做effect函数），它的作用是，在页面渲染后执行这个函数，因此你可以把ajax请求等放在这里执行
第二个参数是一个数组

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  //类似于componentDidMount和componentDidUpdate: 
  useEffect(() => {   
  //使用浏览器API更新文档标题   
      document.title = `你单击了${count} 次`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useReducer

代替Redux，封装了dispatch和state
const [state, dispatch] = useReducer(reducer, initialArg, init);

const initialState = {count: 0};//state

function reducer(state, action) {
  switch (action.type) {
    case '加':
      return {count: state.count + 1};
    case '减':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: '减'})}>-</button>
      <button onClick={() => dispatch({type: '加'})}>+</button>
    </>
  );
}