react axios 自定义hooks react hooks函数

Hooks是react16.8版本新增的特性 ,可以让你在函数组件中使用state以及其他Reat的特性

---

react中常用的三个Hook

(1)React.useState()
(2)React.useEffect()
(3)React.useRef()

一.useState()
1.State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
语法: const [xxx, setXxx] = React.useState(initValue) useState()说明:
参数: 第一次初始化指定的值在内部作缓存返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数 setXxx()2种写法: setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值 setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

---

二.useEffect()
由于函数数组件中不能使用生命周期 ,所以用useEffect()在函数中
1）Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子） (2)Reactz中的副作用 操作发ajax请求数据获取，设置订阅、启动定时器，手动修改真实DOM (3)语法和说明：useEffect(() =>{ //在此可以执行任何带副作用操作(发ajax请求数据获取，设置订阅、启动定时器，手动修改真实DOM) return () => { //组件卸载前执行 //在此做一些收尾工作，比如清除定时器/取消订阅等 } },[stateValue]) //如果指定的是[],回调函数只会在第一次render（）后执行 （4）可以把useEffect Hook看做如下 三个函数的组合 componentDidMount():一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息 componentDidUpdate():更新阶段 componentWillUnmount():一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

三.useRef()
(1) Ref Hook 可以在函数最贱汇总存储 /查找组件内的标签或任意其他数据 (2) 语法:const refContainer = useRef() (3) 作用保存标签对象，功能与React.createRef()一样

function App(){
    //count:当前状态值,setCount:更新状态值的函数
    const [count,setCount] =React.useState(0)
    const [name,setName] =React.useState('邓紫棋')
    //回调
    function add(){
      //第一中写法
      //  setCount(count+1)
      //第二中写法，函数
     setCount(count => count+1)
    }

    function changeName(){
        setName(name=>'周杰轮')
    }

    return(
       <div>
        <h2>当前求和为:{count}</h2>
        <h2>我的名字是:{name}</h2>
        <button onClick={add}>点我加1</button>
        <button onClick={changeName}>点我改名</button>
       </div>
        )
 } 
 export default App