React hooks详解

前言

- React是主流的前端框架，其核心是组件。 - 在v16.8 版本之前，组件的标准写法是类class，但class存在一些缺点，如： 1、业务逻辑分散在各个方法中，导致重复逻辑、关联逻辑，代码量重 2、大型组件很难拆分和重构，很难测试 3、组件类引入了复杂的编程模式，比如 render props 和高阶组件 - React团队在v16.8 版本引入了React hooks。hook的汉语意思是钩子，React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 - 钩子是为函数引入外部功能，React 约定，钩子一律使用use前缀命名，便于识别。React 默认提供了一些常用钩子，你也可以封装自己的钩子。

---

一、状态钩子useState()

纯函数不能有状态，所以要把状态放在钩子里边。而useState()的作用，就是为函数组件引入状态state。

案例：实现点击按钮1次，状态+1的效果
代码示例：

import React, {
    useState } from 'react';

const StateExample = () => {
   
  const [state, setState] = useState(0); //这里给state设置初始值为0
  
  //按钮的点击事件是名为add的函数
  //每触发一次函数，状态+1
  function add() {
    
    setState(state + 1); 
  }

  return <button onClick={
   add}>点击+1 现在为：{
   state}</button>;
};

export default StateExample;

---

二、共享状态钩子useContext()

useState()解决了组件本身的状态问题，那么要解决各个组件间状态共享就需要用到useContext()

案例：以老师给孩子们发糖，要求每个孩子糖果个数及口味一样为例，实现状态共享效果
代码示例：

import React, {
    useContext } from 'react';

const SugarContext = React.createContext({
   });// 在组件外部建立一个Context

const Amy = () => {