react hooks常用方法
1.useState
function Example01(){
const [ count, setCount ] = useState(0) //声明
return(
{count}
//读取
// 使用（修改）
)
}
2.useEffect
1.React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)
2.useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的。
注意：
如果useEffect后面没有依赖：
这种时候每次每次页面更新都会执行
useEffect(()=>{
console.log('执行');
})
如果后面为空
页面初始的时候执行一次
useEffect(()=>{
console.log('执行');
},[])
如果后面有值且不为空
只有当count改变时才会被触发
useEffect(()=>{
console.log('执行');
},[count])
使用useEffect解绑，组件卸载的时候，比如需要清除计时器等：
但是当传空数组[]时，就是当组件将被销毁时才进行解绑，这也就实现了componentWillUnmount的生命周期函数。
function Index() {
useEffect(()=>{
console.log('useEffect=>Index')
return ()=>{
console.log('Index页面离开')
}
},[])
return 测试解绑
;
}
3.useContext上下文传值
1.父组件：
const CountContext = createContext() //引入
function Example01(){
const [ count, setCount ] = useState(0)
return(
{count}
//使用包裹子组件传递值
)
}
2.子组件：
function ChildContent(){
const context = useContext(CountContext)
return(
{context}
)
}
4.useReducer
它也是React hooks提供的函数，可以增强我们的Reducer，实现类似Redux的功能。
import React, { useReducer } from 'react'
function Example5(){
const [ count, dispatch ] = useReducer((state,action)=>{
switch(action){ //通过判断对应的action,去执行对应的方法
case 'add':
return state+1
case 'sub':
return state-1
default:
return state
}
},1)
return(
{count}
//通过dispatch，传递对应的action，调用对应的方法
)
}
export default Example5
5.useMemo
useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。
只要使用useMemo，然后给她传递第二个参数，参数匹配成功，才会执行。
1.在父组件里面，传递对应需要的参数
import React , {useState,useMemo} from 'react';
function Example7(){
const [one , setOne] = useState('第一个的状态')
const [two , setTwo] = useState('志玲待客状态')
return (
<>
{two}
)
}
2.父组件调用子组件
function ChildComponent({name,children}){
function changeXiaohong(name){
return name
}
const actionXiaohong = useMemo(()=>changeXiaohong(name),[name])
return (
<>
{actionXiaohong}
{children}
)
}
6.useRef
用useRef获取React JSX中的DOM元素，获取后你就可以控制DOM的任何东西了。但是一般不建议这样来作，React界面的变化可以通过状态来控制
import React, { useRef } from 'react'
function Example8(){
const inputRef = useRef(null)
const onButtonClick=()=>{
inputRef.current.value='THIS IS INPUT'
console.log(inputRef);
}
return(
)
}
export default Example8
保存普通变量
import React, { useRef,useState } from 'react'
function Example8(){
const inputRef = useRef(null)
const onButtonClick=()=>{
inputRef.current.value='THIS IS INPUT'
console.log(inputRef);
}
const [state, setstate] = useState('inputValue') //声明一个变量
return(
setstate(e.target.value)}/> //绑定对应的值以及绑定onChange事件
)
}
export default Example8