07.useDefault

文章预览

在 React 应用开发中，处理 状态的默认值 和 空值情况 是一个常见需求。 useDefault 钩子提供了一种优雅的方式来管理状态，同时为空值（null 或 undefined）提供默认回退值。这个自定义钩子不仅简化了状态管理，还提高了代码的可读性和健壮性。以下是如何实现和使用这个自定义钩子： const  useDefault =  ( defaultState, initialState ) =>  {    const  [value, setValue] = React.useState(initialState);    const  isValueEmpty = value ===  undefined  || value ===  null ;    return  [isValueEmpty ? defaultState : value, setValue]; }; const  UserCard =  ()  =>  {    const  [user, setUser] = useDefault({  name :  'Adam'  }, {  name :  'John'  });    return  (      < >        < div > User: {user.name} div >        < input   onChange = {e  =>  setUser({ name: e.target.value })} />        < button   onClick = {()  =>  setUs ………………………………