寻找最常自定义hooks-----状态重置篇

什么是状态重置

很多对象拥有初始值，例如

const [value,setValue] = useState('hooks')

字符串hooks，就是变量value的初始值，后面想改变value的值需要调用setValue方法。

那么有些时候，在value改变N次之后，我们想让他回到最开始的值（就是需要把value重置为初始值hooks，虽然可以直接setValue('hooks')，但是不美观也不直观，在更复杂的业务场景中不实用）

所以需要我们自己自定义hooks-----状态重置

重点！！！这个知识点主要是上一篇文章的附属产物，更加详细的内容请关注下一篇文章！！！

应用场景

1.组件销毁，需要状态管理的数据重置

2.需要数据还原的相关业务（例如有些地方form，修改完成后不满意，重置为初始状态）

上代码

代码介绍

useResetState主要是利用了闭包的属性，保留的最开始的初始值在闭包内

优点

在多个值都需要状态重置时候，不需要记住初始值，

例子 例如变量c的值其实是由组件外部传递进来的，就像antd很多组件的defaultValue属性，初始化时生效。

我们本身并不知道其一开始的值是什么，利用闭包机制将初始值存储，就可以重置成功了。

缺点

只适用于需要状态重置的相关业务场景。

hooks代码

import { useState } from 'react';
import { Input, Button } from 'antd';
​
function useResetState(val) {
  const [value, setValue] = useState(val);
  const resetValue = () => {
    setValue(val);
    return val;
  };
  return [value, setValue, resetValue];
}
​
export default function Text() {
  const [val, setVal, resetVal] = useResetState('hello world');
  const [val1, setVal1, resetVal1] = useResetState({ a: 1, b: 2 });
​
  const onChange = (e) => {
    setVal(e.target.value);
  };
  const onClick = () => {
    resetVal();
  };
  return (
    <div>
      <Input value={val} onChange={onChange}></Input>
      <Button onClick={onClick}>重置</Button>
      <div>{val1.a}</div>
      <div>{val1.b}</div>
    </div>
  );
}
​

总结

每天进步亿点点，升职加薪迎娶白富美不是梦！！！祝愿我美梦成真。。。