Hooks主打使用function component组件,替代class组件
不可以在循环,条件或嵌套函数中使用HOOK
使用hook的目的:
- 解决 class 中生命周期函数经常包含不相关的逻辑,但又把相关逻辑分离到了几个不同方法中
- React组件之间复用状态逻辑很难,hook可以在不改变组件内部结构的情况下复用状态逻辑。
- 在不使用class类组件的情况下,拥有更多的react特性
React怎么知道哪个state对应哪个useState?
因为react靠的是hook的调用顺序,只要hook的调用顺序在多次渲染中保持一致,react就能正确的将内部的state和hook进行关联!!!!!。
一.useState
useState主要用做变量和方法的声明,useState(参数)
中的参数表示变量的初始值,参数可以为数字、字符串、对象。
在import导入时,使用useState替代之前由react导入的Component,如下
import React ,{useState} from 'react'
function Demo(){
const [count , setCount] = useState(0);
return(
<div>
<p> you clicked {count} times</p>
<button onClick = {() => {setCount(count+1)}}>click me</button>
</div>
)
}
const [count , setCount] = useState(0)
,返回的第一个参数count为定义的state变量,第二个为更改state变量值的函数
二.useEffect
useEffect相当于是componentDidMount,componentDidUpdate,componentWillUnmount
三个生命周期函数的组合。是异步执行的,不会阻塞浏览器更新屏幕。
function Demo(){
useEffect(() => {
console.log(`你来了`)
return () => {
console.log(`你走了`)
}
},[])
}
useEffect中的return后面接的函数相当于生命周期函数中的componentWillUnmount
useEffect函数可以接收两个参数,第二个参数为数组,当数组中变量值发生更改的时候,React会重新执行effect
当数组为[]
空数组时,则相当于仅在组件挂载和卸载时执行,即effect仅被执行1次。
三.useContext和createContext
useContext主要用于父子组件之间的传参,相当于class组件中props传参
在使用时,要先导入useContext和createContext
import React,{useState,createContext,useContext} from 'react'
const CountContext = createContext(); //创建上下文组件
function Counter(){ //子组件
let count = useContext(CountContext)
return (<h2>{count}</h2>)
}
function Demo(){
const [count , setCount] = useState(0);
return(
<div>
<p> you clicked {count} times</p>
<button onClick = {() => {setCount(count+1)}}>click me</button>
<CountContext.Provider value={count}>
<Counter/> //子组件
</CountContext>
</div>
)
}
- 先创建上下文组件
createContext()
- 在父组件中,通过
上下文组件.Provider
将变量传出,标签体为子组件 - 在子组件中,通过
useContext(上下文组件)
获取传出的变量值
四.useSelector
const num = useSelector(state => state.num)
子组件可以通过useSelector访问state中的num