什么是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的新人有所帮助