hooks
hooks copied to clipboard
alibaba
feat: 添加了默认状态值hook函数
🤔 This is a ...
- [√] New feature
- [ ] Bug fix
- [ ] Site / documentation update
- [ ] Demo update
- [ ] TypeScript definition update
- [ ] Bundle size optimization
- [ ] Performance optimization
- [ ] Enhancement feature
- [ ] Internationalization
- [ ] Refactoring
- [ ] Code style optimization
- [ ] Test Case
- [ ] Branch merge
- [ ] Other (about what?)
🔗 Related issue link
💡 Background and solution
暂无
📝 Changelog
| Language | Changelog |
|---|---|
| 🇺🇸 English | |
| 🇨🇳 Chinese |
☑️ Self Check before Merge
⚠️ Please check all items below before review. ⚠️
- [√] Doc is updated/provided or not needed
- [√] Demo is updated/provided or not needed
- [√] TypeScript definition is updated/provided or not needed
- [√] Changelog is provided or not needed
感觉没有必要，直接在 useState 里判断就好了
useState((initialState === undefined || initialState === null) ? defaultState: initialState);
感觉没有必要，直接在 useState 里判断就好了
useState((initialState === undefined || initialState === null) ? defaultState: initialState);
我认为还是有必要的，对于追求简单的人，只想定义好默认值，而不需要自己去写判断。
感觉没有必要，直接在 useState 里判断就好了
useState((initialState === undefined || initialState === null) ? defaultState: initialState);
我提供给开发者传默认值参数，他就不需要关心我内部的判断，直接使用就可以，也算是一个小技巧的提炼。
1、对于 defaultState 和 initialState，有一定的理解成本，看上去非常的类似... 不仔细看文档和 demo 的话，很难知道到底取哪个值
2、如果初始状态就期望是 null，是不是得 useDefault(null, null)
3、通常情况下， useState(value || defalutValue) 就能满足要求，所以我觉得这个 hook 意义不大，先在自己的项目里使用吧
1、对于
defaultState和initialState，有一定的理解成本，看上去非常的类似... 不仔细看文档和 demo 的话，很难知道到底取哪个值2、如果初始状态就期望是
null，是不是得useDefault(null, null)3、通常情况下，
useState(value || defalutValue)就能满足要求，所以我觉得这个 hook 意义不大，先在自己的项目里使用吧
1.要用这个函数，那肯定也就要看文档描述。 2.这个并不适合默认状态为null的情况。 3. 这个相当于就是如果初始状态是null,就会采用传入的默认值作为默认状态，相当于有一个占位符。所以我才认为这个hook函数可以加入，也算是一个小技巧的提炼，如果期望默认值是null,那这个hook函数就失去了意义。当然我认为这里的默认状态值不应该允许传入null和undefined
1、对于
defaultState和initialState，有一定的理解成本，看上去非常的类似... 不仔细看文档和 demo 的话，很难知道到底取哪个值2、如果初始状态就期望是
null，是不是得useDefault(null, null)3、通常情况下，
useState(value || defalutValue)就能满足要求，所以我觉得这个 hook 意义不大，先在自己的项目里使用吧
于 3. useState(value || defalutValue) 应该有所不同，他应该是希望当清空值的时候能够有一个默认的展示
const NORMAL_VALUE = 5;
export default function App() {
const [value, setValue] = useDefault(NORMAL_VALUE, undefined);
return (
<div>
<h1>{value}</h1>
<button onClick={() => setValue(value + 1)}>+1</button>
<button onClick={() => setValue()}>恢复默认值</button>
</div>
);
}
const useDefault = (defaultState: any, initialState: any): any => {
const [value, setValue] = useState(initialState);
const isEmptyValue = value === undefined || value === null;
return [isEmptyValue ? defaultState : value, setValue];
};
但我也认为必要性不太大，这样写会不会更好？
const NORMAL_VALUE = 5;
export default function App() {
const [value, setValue] = useState<number>();
console.log("value", value);
const realValue = useMemo(() => value ?? NORMAL_VALUE, [value]);
return (
<div>
<h1>{realValue}</h1>
<button onClick={() => setValue(realValue + 1)}>+1</button>
<button onClick={() => setValue(undefined!)}>恢复默认值</button>
</div>
);
}
两个 hook 都不是很建议，业务上使用不是很多，公用的不多，不建议放到 ahook 中，增加不必要的包体积
- useDefault：没必要，比较多余，开发者自己定义就好了，为啥提供这个默认值呢
- useHash: 比较少见更改 hash 这个场景
