首先得了解自定义 Hooks 跟普通函数区别在于哪里?
- Hooks 只应该在 React 函数组件内调用,而不应该在普通函数调用。
- Hooks 能够调用诸如 useState、useEffect、useContext等,普通函数则不能。由此可以通过内置的Hooks等来获得Firber的访问方式,例如可以在当前节点用useRef存点数据。
运用场景:
静态数据处理,用来常量变更的,比如 通用表头,与store和context不一样的是,不用渗透,不会记忆变更,可用作取或者修改想要的数据。
优点:
hooks和react生命周期都可用
灵活性,操作性很强
与mixin混合自定义很像
缺点:
兼容性有问题,因为是hooks写法,只能支持在 hooks文件调用,不支持内组件class component
eslint请用use命名函数,不然会出警告。
代码块:
//e可传入参数,比如默认值
const useCommonData = (e:any)=>{
const [a, setA] = useState(e);
return {a,setA}
}
export default useCommonData
调用的话
import useCommonData form "./xxxx
const b = ()=>{
const {a,setA} = useCommonData("1")
}
export default b
总结:
既然都是玩数据的时代了,骚操作走起来,努力加强自己!