常见购物网站功能,做餐饮的网站,wordpress 封装 app,微信小程序定制团队一.useEffect
useEffect是hooks中的生命周期函数 1.只要页面更新就触发回调#xff1a; useEffect(() { // 执行逻辑 }) 2.只运行一次#xff08;组件挂载和卸载时执行#xff09;#xff0c;第二个参数传空数组[]#xff1a; useEffect(() { // },[]) 3. 条件…一.useEffect
useEffect是hooks中的生命周期函数 1.只要页面更新就触发回调 useEffect(() { // 执行逻辑 }) 2.只运行一次组件挂载和卸载时执行第二个参数传空数组[] useEffect(() { // },[]) 3. 条件执行第二个参数传值可以是多个数据源的数组当依赖的数据源发生改变时执行回调 useEffect(() { // },[source1,source2…])
二.useState
useState用来更新数据状态 类组件是用的setState({})
三.useRef, useImperativeHandle,forwardRef
1.首先我们先用React.useRef创建一个ref const reRef React.useRef(null); 2. forwardRef是允许了 父组件向子组件传递一个ref,父组件才可以获得子组件的方法和实例元素 3. useImperativeHandle 是在子组件中接收这个ref 可以暴露子组件的特定属性或方法给父组件
例子 父组件 import React, { useEffect, useState, useRef } from ‘react’; const reRef useRef(null); reRef.current.fn(); 注意 这个reRef也可以传到其他的文件中在其他的文件里也可以调用或者更新子组件的属性和方法的
子组件 function Parent(props, ref) { const [visible, setVisible] useState);
useImperativeHandleref,()({ fn: (){ console.log(‘这是传的第一个方法’) } fn2: (){ console.log(‘这是传的第二个方法’) }, setVisible,//这是传的一个属性值 }
}
export default forwardRef(Parent);
注当需要复杂的传值的属性和方法调用时 这么用可以 但一般单纯的回归方法调用就能解决就不用这样写了 比如 父组件 Parent onClose{(num){ console.log(881,num)
}}
