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 改变后,会产生一些副作用

},[工资表])