hooks

hooks介绍

react中的hook是react16.8版本更新以后增加的新特性新语法
可以让函数组件使用state以及生命周期等新特性

hooks组件模板

import React, { useState } from 'react';

const View = (props) =>{
  return （
	<div></div>
	）
}
export default View;

常用api：

state让函数组件拥有react得状态
useState（）

语法 const 【value，setValue】=useState（初始值）

参数：第一次初始化的值存到内部缓存
返回值：包含俩个元素的数组，第一个是当前内部的state，第二个是更新state值得函数

setValue得俩种写法:

setValue（newValue）参数是非函数值，直接指定新的state，内部永新值覆盖掉旧值
setValue（value=>newValue）参数是函数形式，接受原本的state，返回新的state，内部用新的值覆盖旧值**

useEffect让函数组件拥有了类组件的生命周期
直接使用代表着更新（此处不能写入定时器，否则会造成定时器累加）

  useEffect(()=>{
        console.log("2122")
  })//更新

写入一个空数组是挂载

useEffect(()=>{
     console.log("2122")
  },[])//挂载

传入个回调函数卸载（清除定时器）

useEffect(()=>{
     let timer=setInterval(()=>{
        setCount(count=>count+1)
    },1000)
        console.log("2122")
        return ()=>{
            clearInterval(timer)
        }
    })//卸载传入个回调函数

在数组中写入一个state值是对他进行监听

  useEffect(()=>{
        console.log("2122")
    },[count])//对单个值或者多个值进行监听

完整示例

import React,{useState,useEffect} from "react"
import ReactDom from "react-dom"
const Hooks =(props)=>{
    const [count,setCount]=useState(12)
   function add(){
        setCount(count=>count+1)
    }
    function unmount(){
        ReactDom.unmountComponentAtNode(document.getElementById("root"))
    }
    // useEffect(()=>{
    //     console.log("2122")
    // })//更新
    // useEffect(()=>{
    //     console.log("2122")
    // },[])//挂载
    // useEffect(()=>{
    //     console.log("2122")
    // },[count])//对单个值或者多个值进行监听
    useEffect(()=>{
     let timer=setInterval(()=>{
        setCount(count=>count+1)
    },1000)
        console.log("2122")
        return ()=>{
            clearInterval(timer)
        }
    })//卸载传入个回调函数
  
    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <input type="button"  value="点我" onClick={add}/>
            <input type="button"  value="卸载" onClick={unmount}/>
        </div>
    )
}
export default Hooks

useContext

它取代了context.consumer组件，之前的consumer组件里面必须是一个回调函数写法
其他概念没变，全局的上下文对象依然是由React.createContext方法生成的，上游组件依然使用provider组件提供数据
context优点是可以跨层级通信