首页 / REACT / react-hooks初探：useEffect入门使用场景

react-hooks初探：useEffect入门使用场景

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react-hooks初探：useEffect入门使用场景，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1515字，纯文字阅读大概需要3分钟。

内容图文

react-hooks初探：useEffect使用场景

常用场景：

  1. 全局任意变量变动均可触发
useEffect(() => {
	//不加参数时 === 在任意生命周期中可执行
	//这里可以处理一些全局变量的变化，例如lodaing状态的设置
})
  1. 在组件销毁时触发
useEffect(() => {
	//这里可以做一些希望在组件销毁时要做的处理，比如重置数据
}, [])
  1. 在特定变量发生变化时才会触发
useEffect(() => {
	//在paramA发生变化时希望做的下一步操作
}, [paramA])

useEffect基本构造：

useEffect(() => {
	//1.常用操作逻辑
	//2.return函数（当前组件销毁的时候你想干点儿什么）
},[//3. 可控参数（可有可没有）])

1.常用操作部分不做多余阐述，随意发挥，根据不同的useState生成的变量做不同的逻辑处理
2.return函数：我的理解是这个return函数可以做一些变量重置的工作，举个栗子。

//有一个modal弹窗组件，大致dom结构如下：
<Modal>
	<Form>
		<Form.Item>
			<Input onChange={onchange}/>
		<Form.item>
	</Form>
</Modal>
//过程：
//1.在打开弹窗的时候触发请求，渲染弹窗的table或者form组件
//2.操作更新输入框的value
//3.点击确定按钮，关闭弹窗，将内容传递到上层父组件
//问题：
//在重新打开弹窗的时候，会发现弹窗内部的某些状态或者值是上次操作留下的
//可能导致上述问题的原因：
//1.在销毁弹窗时未做数据的重置工作（40%）
//2.我们在某一个useEffect中做了重置的工作，但是没有触发对应的useEffect（60%）
//这个时候我们就可以借助return函数帮我们做一下变量的重置工作

function getInputValue() {
	const [input, setValue] = useState('');
	...
	const reSet = () => {
		setValue('')
	}
	useEffect(() => {
		...
		return(
			reSet();
		)
	});
	return (
		<Modal>
			<Form>
				<Form.Item>
					<Input onChange={onchange}/>
				<Form.item>
			</Form>
		</Modal>
	)
};
export default getInputValue;

内容总结

以上是互联网集市为您收集整理的react-hooks初探：useEffect入门使用场景全部内容，希望文章能够帮你解决react-hooks初探：useEffect入门使用场景所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1019203.html

来源：【匿名】