react函数组件钩子函数
1、Function组件没有this对象,没有生命周期。 hooks 是 16.8 以后才有的,也就是功能组件是后面添加的, 它的原理是提取并实现类组件的render方法 函数组件和钩子 1..useState——定义一个状态数据。为什么 useState 在第二个参数中是一个函数?因为react是单向数据流,更新状态数据需要调用方法,所以第二个参数是一个更新数据的函数。第二个参数是异步的吗?一定
1、Function组件没有this对象,没有生命周期。 hooks 是 16.8 以后才有的,也就是功能组件是后面添加的,
它的原理是提取并实现类组件的render方法
函数组件和钩子
1..useState——定义一个状态数据。为什么 useState 在第二个参数中是一个函数?因为react是单向数据流,更新状态数据需要调用方法,所以第二个参数是一个更新数据的函数。第二个参数是异步的吗?一定是异步的,那么如何解决可以通过使用Promise、setTimeout和requestAnimationFrame来解决
b.useEffect -- 副作用监控依赖实现类似于vue的watch属性,
如果依赖发生变化,就会执行回调(这里不能写成死循环)
如果没有依赖,props 和 state 数据的变化会导致执行。如果依赖项是一个空数组:
第一个回调参数相当于componentDidMount生命周期。如果函数中返回一个函数CB,则CB函数相当于componentWillUnmount生命周期
//使用解构赋值定义数据和更新数据的方法
常量 [salaryList,setSalaryList] u003d useState([])
//有一个类似于类组件生命周期的钩子函数——有一个空依赖的副作用钩子函数
//useEffect(async function() { //副作用回调函数一定不能是异步方法,即这里不能使用async + await
使用效果(函数(){
//这是用于执行副作用业务方法的回调函数
getList().then(列表 u003d>{
setSalaryList(列表)
})
//定义一个resize事件,因为卸载组件时需要注销resize事件的第二个参数
函数 resizeEvt(){
console.log('-------- 调整大小事件')
}
window.addEventListener('resize',resizeEvt)
//如果在副作用钩子函数中返回一个函数,这个函数可以作为卸载生命周期组件WillUnmount
返回函数(){
console.log('-------- componentWillUnmount')
window.removeEventListener('resize',resizeEvt)
}
},[])
2.useMemo:react里面有个useMemo钩子函数,和vue的计算函数一致。用于监控依赖变化,计算结果并缓存结果
第一个是计算函数,必须返回计算结果
二是计算依赖关系。当依赖发生变化时,会执行回调,重新计算结果值并更新缓存
常量总金额u003duseMemo(函数(){
返回工资列表.reduce((res,it)u003d>{
if(!!it.amount) res +u003d it.amount
返回资源
},0) //默认初始值为0
},[salaryList]) // 依赖计算对象变量
3.使用回调():
因为名为function的函数会被重复定义,当前组件和这个方法会被定义两次,所以会在内存中占用两份
定义回调函数并缓存回调函数。当数据发生变化时,回调函数会更新而不是重新定义,这样可以减少内存消耗
有两个参数:(...args:[]) u003d> any,定义了回调函数,表示回调函数可以接收很多参数
deps:React.DependencyList 为必填参数,依赖于DependencyList回调函数
为了优化内存,方法应该定义为函数对象,然后可以缓存在内存中——所以可以使用useCallback钩子函数来定义回调函数
因此,当前回调方法中的salaryList是一个空数组。如果你想有一个值,你应该在赋值后或者当salaryList数据改变时更新回调函数
//遍历数据,比较id,如果id相等,则表示修改了这个数据的税率
常量 calcFunc u003d useCallback(函数(id){
让 _list \u003d SalaryList.reduce((res,it)u003d>{
if(it.idu003du003du003d id){
it.rate \u003d Math.ceil(Math.random() * 42 + 3 ) / 100
it.amount\u003dit.base + it.jx - it.rateAmount
}
res.push(它)
返回资源
},[])
setSalaryList(_list)
//当数组发生变化时,需要观察。当数据有值时,需要计算税率和支付的工资——
//这个和vue中使用watch+deep深度监听属性一样
//观看:{
// 工资表:{
// 深度:真,
// 处理程序:函数(_list){}
}
//}
//在 react 中如何实现 -- 当salaryList 改变后,会产生一些副作用
},[工资表])
更多推荐
所有评论(0)