【React hooks的使用】

什么是React hooks

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

常用的hook

useState

常用于声明变量，属于异步操作中的微操作

import React,{useState} from 'react'
//声明数值
const [num, changenum] = useState(0)
//声明数组
const [list,setList]=useState([1,2,3])
//声明布尔值
let [isShow,setShow]=useState(true)

useEffect

相当于是react生命周期中的不同周期，不同的书写方式对应不同的功能

书写方式1：

import React,{useEffect} from 'react'
useEffect(()=>{
    console.log('装载更新触发');
  })

对应于react旧生命周期中的ComponentWillMount、ComponentDidUpdate，当组件挂载或更新时，就会触发

书写方式2：

import React,{useEffect} from 'react'
useEffect(()=>{
    console.log('ajax');
  },[])

对应于旧生命周期中的ComponentDidMount，当组件挂载完成后执行，只执行一次当前的操作，与类组件使用类似，常在此进行ajax请求操作

书写方式3：

//声明一个变量（第一个参数代表声明的变量，第二个参数代表唯一可以操作这个变量的方法）
import React, { useState,useEffect } from 'react'
const [num,changenum]=useState(0)
useEffect(()=>{
    console.log('只有num发生改变才触发');
  },[num])

 对应于旧声明周期中的ComponentDidUpdate，当声明的数据更改后触发

书写方式4：

//子组件
import React,{useEffect} from 'react'
useEffect(()=>{
    return ()=>{
      console.log('销毁触发');
    }
  },[])

不同于写在父组件里的写法2，当前写法中有返回值，对应于旧声明周期中的componentWillUnMount，当组件被销毁时触发 

useMemo

React定义函数组件的一种方式，用于调用函数组件时的性能的优化，当调用时传递的变量发生改变或调用时传递的函数被调用时，相当于计算属性

//父组件
import React, { useState } from 'react'
let [num,changenum]=useState(0)
<Minememo num={num}></Minememo>

//子组件
import React, { useEffect } from 'react'

export default React.memo(()=>{
    //验证子组件是否更新
    useEffect(()=>{
        console.log('child Minememo 子组件更新');
    })
    return(
        <div>Minememo</div>
    )
})

 PureComponent

React定义类组件的一种方式，用于调用类组件时的性能的优化，当调用时传递的变量发生改变或调用时传递的函数被调用时，触发更新

//父组件
import React, { useState } from 'react'
let [num,changenum]=useState(0)
<Minepure num={num}></Minepure>

//子组件
import React, { PureComponent } from 'react'

export default class Minepure extends React.PureComponent {
  render() {
    console.log('Minepure执行了');
    return (
      <div>
        Minepure
      </div>
    )
  }
}

useCallback

给子组件固定传值同一个函数

一般情况下，父组件传递给子组件的函数会渲染更新、渲染更新，而使用useCallback后，父组件固定给子组件传递一个函数，只有参数改变，才会调用重新渲染

import React,{useCallback} from 'react'
const say=useCallback(()=>{
    alert('Homechildmemo')
  },[list])

useRef

react获取节点的方式

import React,{useRef} from 'react'
let ref=useRef()
//调用时
<p ref={ref}>ref更改前</p>
<button onClick={()=>{
    ref.current.innerHTML='ref更改后'
}}></button>

useReducer

常用于声明数组、对象，相较于useState声明的数组和对象，操作更为便捷

使用步骤：

步骤1：声明变量

import React,{useReducer,useState} from 'react'
const [inputValue,changeValue]=useState('')
//两个参数：
//参数1为回调函数，有两个形参，一个代表state数据，一个代表操作
const [todolist,dispatch]=useReducer((state,action)=>{
    switch(action.type){
        case 'add':
            state.push(action.data)
            return [...state]
        case 'del':
            state.splice(action.data,1)
            return [...state]
    }
},[])

步骤2：页面渲染，添加点击事件

<input type="text" value={inputValue} onChange={(e)=>{changeValue(e.target.value)}} />
<button onClick={adds}>添加</button>
<ul>
    {todolist.map((item,index)=>{
        return (
            <li key={index} onClick={()=>{del(index)}}>{item}</li>
        )
    })}
</ul>

 步骤3：编写点击事件

var adds=()=>{
    dispatch({type:'add',data:inputValue})
}
var del=(index)=>{
    dispatch({type:'del',data:index})
}

hooks组件传参

父组件调用时传递参数

子组件通过props进行接收，即可进行组件的调用

总结

以上呢，就是近期我对于react hooks的理解，希望对于刚刚接触react的新人有所帮助