react Hook的使用
useState的使用
- 因为函数式组件没有声明周期没有状态,利用hook可以达到一样的效果。Hook 使你在无需修改组件结构的情况下复用状态逻辑。
// 引入react 和 useState
import React, { useState } from 'react'
// 定义函数组件
function Test() {
const [count, setCount] = useState(0) // 这里的count相当于类组件中的this.state.count但是函数组件是没有this和state的,直接使用即可。setCount相当于类组件中的setState,是用于修改count的值的。
const [age, setAge] = useState(x => 5)//useState里面可以接受一个函数的返回值
// setCount可以直接修改count的值,也可以通过函数的方式返回一个值,其中默认传入参数为之前的count,一下分别通过直接修改count和用函数来修改age的例子
return (
<div>
<p>your count is {count}</p>
<p>your age is {age}</p>
<button onClick={() => setCount(count+1)}>setCount</button>
<button onClick={() => setAge((x) => x+5)}>setAge</button>
</div>
)
}
useEffect
// useEffect是一个异步的操作。
import React, { useState, useEffect } from 'react';
function LUseEffect (){
const [count, setCount] = useState(0)
useEffect(()=>{
console.log('this is useEffect')
})
console.log(count)
return (
<div>
<p>{count}</p>
</div>
)
}
export default LUseEffect
第一个可以传入一个函数,第二个参数为监听的依赖(数组形式),依赖改变则执行,依赖不改变则不执行。第二个传入参数为空数组,则表示只会在页面加载的时候触发一次(传入了监听依赖后首次渲染页面也会触发,相当于componentDidMount)
import React, { useState, useEffect } from 'react';
function LUseEffect (){
const [count, setCount] = useState(0)
useEffect(()=>{
console.log('this is useEffect')
},[count])// 监听了count,除了首次渲染后,每次count的值改变也会触发。
return (
<div>
<p>{count}</p>
<button onClick={()=>{setCount(x => x+1)}}>setCount</button>
</div>
)
}
export default LUseEffect
如果表示组件将要卸载的时候清除一些事件可以useEffect里面return一个函数,组件被卸载前进行执行
useEffect(()=>{
console.log('this is useEffect')
return ()=>console.log('据说这里是将要被卸载的时候执行哦')
},[count])
上面的代码在组件的卸载时执行,因为监听了count的改变,等同于卸载后重新挂载,也会触发。
使用useEffect来监听props的状态,可以达到props改变后来进行相关的处理以及渲染,相当于componentWillUpdate,来获取到props的改变,进行相关的操作。渲染性能高效,没有改变的Dom不会一起被渲染,如name不会和count一起被重新渲染,只会重新渲染count
import React, { useState, useEffect } from 'react';
const Son = (props)=>{
const [propsKeys, setPropsKeys] = useState([])
const [propsValues, setPropsValues] = useState()
useEffect(()=>{
setPropsKeys(Object.keys(props))
setPropsValues(Object.values(props))
},[props])
return (
<div>
我接受的props的{
propsKeys.map((item, index) => {
return (
<p key={index}>keys is {item}, and value is {propsValues[index]}</p>
)
})
}
</div>
)
}
function LUseEffect (){
const [count, setCount] = useState(0)
useEffect(()=>{
console.log('this is useEffect')
return ()=>console.log('据说这里是将要被卸载的时候执行哦')
},[count])
return (
<div>
<p>{count}</p>
<button onClick={()=>{setCount(x => x+1)}}>setCount</button>
<p>this is son</p>
<Son num={count} name='lx'/>
</div>
)
}
export default LUseEffect