react-hooks初探：useEffect使用场景

• • 常用场景：
  • useEffect基本构造：

常用场景：

1. 全局任意变量变动均可触发

useEffect(() => {
	//不加参数时 === 在任意生命周期中可执行
	//这里可以处理一些全局变量的变化，例如lodaing状态的设置
})

2. 在组件销毁时触发

useEffect(() => {
	//这里可以做一些希望在组件销毁时要做的处理，比如重置数据
}, [])

3. 在特定变量发生变化时才会触发

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;