广西网站开发建设,域名注册1元,南昌创建网站,阿里巴巴外贸圈论坛文章目录 一、项目起航#xff1a;项目初始化与配置二、React 与 Hook 应用#xff1a;实现项目列表三、TS 应用#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook… 文章目录 一、项目起航项目初始化与配置二、React 与 Hook 应用实现项目列表三、TS 应用JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook路由与 URL 状态管理八、用户选择器与项目编辑功能1~34.编辑后刷新-useState的懒初始化与保存函数状态5.完成编辑后刷新功能 学习内容来源React React Hook TS 最佳实践-慕课网 相对原教程我在学习开始时2023.03采用的是当前最新版本
项版本react react-dom^18.2.0react-router react-router-dom^6.11.2antd^4.24.8commitlint/cli commitlint/config-conventional^17.4.4eslint-config-prettier^8.6.0husky^8.0.3lint-staged^13.1.2prettier2.8.4json-server0.17.2craco-less^2.0.0craco/craco^7.1.0qs^6.11.0dayjs^1.11.7react-helmet^6.1.0types/react-helmet^6.1.6react-query^6.1.0welldone-software/why-did-you-render^7.0.1emotion/react emotion/styled^11.10.6
具体配置、操作和内容会有差异“坑”也会有所不同。。。 一、项目起航项目初始化与配置 一、项目起航项目初始化与配置 二、React 与 Hook 应用实现项目列表 二、React 与 Hook 应用实现项目列表 三、TS 应用JS神助攻 - 强类型 三、 TS 应用JS神助攻 - 强类型 四、JWT、用户认证与异步请求 四、 JWT、用户认证与异步请求(上) 四、 JWT、用户认证与异步请求(下) 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上) 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下) 六、用户体验优化 - 加载中和错误状态处理 六、用户体验优化 - 加载中和错误状态处理(上) 六、用户体验优化 - 加载中和错误状态处理(中) 六、用户体验优化 - 加载中和错误状态处理(下) 七、Hook路由与 URL 状态管理 七、Hook路由与 URL 状态管理(上) 七、Hook路由与 URL 状态管理(中) 七、Hook路由与 URL 状态管理(下) 八、用户选择器与项目编辑功能
1~3 八、用户选择器与项目编辑功能(上) 4.编辑后刷新-useState的懒初始化与保存函数状态
之前的遗留问题现在尝试解决
修改 src\utils\use-async.ts(新增 rerun 方法, 保存上一次 run 的运行状态)
...
export const useAsync D(...) {...const [rerun, setRerun] useState(() {})...// run 来触发异步请求const run (promise: PromiseD) {if (!promise || !promise.then) {throw new Error(请传入 Promise 类型数据);}setRerun(() run(promise))setState({ ...state, stat: loading });return promise.then(...).catch(...);};return {...// rerun 重新运行一遍 run, 使得 state 刷新rerun,...state,};
};相对直接定义变量通过 useState 定义的变量在组件刷新时会保持之前的状态除非重新setState, 而直接定义会重新初始化 在 src\screens\ProjectList\index.tsx 中尝试调用,使用前先打印一下
...
export const ProjectList () {...const { isLoading, error, data: list, rerun } useProjects(useDebounce(param));...console.log(rerun, rerun)return (Containerh1项目列表/h1{/* Button onClick{rerun}rerun/Button */}.../Container);
};
...…有报错Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
尝试在 rerun 中run 执行前面一步打印编辑src\utils\use-async.ts
...
export const useAsync D(...) {...const run (promise: PromiseD) {...setRerun(() {console.log(set rerun)run(promise)})...};...
};一直不停打印 “set rerun”, 但此时并没有运行 rerun,这样就有理由怀疑在 rerun 赋值时就会直接执行即 useState 不能直接保存函数
codesandbox 上测试一下
export default function App() {const [lazyValue, setLazyValue] React.useState(() {console.log(i am lazy)})console.log(lazyValue);return (div classNameAppbutton onClick{() setLazyValue(() { console.log(update lazyValue) })}setCallback/buttonbutton onClick{lazyValue}call callback/button/div);
}果然不仅在赋值时初始化时就直接执行了
看下 useState 的函数签名
/*** Returns a stateful value, and a function to update it.** version 16.8.0* see https://reactjs.org/docs/hooks-reference.html#usestate*/
function useStateS(initialState: S | (() S)): [S, DispatchSetStateActionS];可以注意到 initialState 是一个联合类型 S 是常用的形式() S 为啥要单列出来呢 可以查看官方文档惰性初始 state | Hook API 索引 – React 通过文档可以得知这种初始化方式仅执行一次且用于初始化值需要复杂计算才能得到的情况昂贵的计算消耗性能
既然如此何不在外面再加一层函数呢试一下
export default function App() {const [callback, setCallback] React.useState(() () {console.log(i am callback)})console.log(callback);return (div classNameAppbutton onClick{() setCallback(() () { console.log(update callback) })}setCallback/buttonbutton onClick{callback}call callback/button/div);
}果然在初始化后可以直接调用 callback在 setCallback 后再调用又是另一个函数了
除了这种方式还可以使用 useRef
export default function App() {const callbackRef React.useRef(() console.log(i am callback));const callback callbackRef.current;console.log(callback);return (div classNameAppbutton onClick{() (callbackRef.current () console.log(update callback))}setCallback/buttonbutton onClick{callback}call callback/button/div);
}https://codesandbox.io/s/blissful-water-230u4?file/src/App.js 使用 useRef 时需要注意改变用其定义的值 不会触发组件重新渲染因此 callback 还是之前的值必须直接执行 callbackRef.current()
export default function App() {const callbackRef React.useRef(() console.log(i am callback));const callback callbackRef.current;console.log(callback);return (div classNameAppbuttononClick{() (callbackRef.current () console.log(update callback))}setCallback/buttonbutton onClick{() callbackRef.current()}call callback/button/div);
}接下来使用第一种方式外面多加一层函数来处理一下
5.完成编辑后刷新功能
编辑 src\utils\use-async.ts(外面多加一层函数)
...
export const useAsync D(...) {...const [rerun, setRerun] useState(() () {})...const run (promise: PromiseD) {...setRerun(() () run(promise))...};...
};还是不行。。。通过分析发现执行 rerunrun 中拿到的还是上一次执行的 Promise上一次调用接口, 因此从上一次执行完的 Promise 拿数据自然还是上次的数据由此可见需要更新 Promise重新调用接口
修改 src\screens\ProjectList\index.tsx(rerun 按钮取消注释)
...
export const ProjectList () {...return (Containerh1项目列表/h1Button onClick{rerun}rerun/Button.../Container);
};
...编辑 src\utils\project.ts(单独抽离 fetchProject执行第一次作为 run 的第一个参数预执行包装后作为第二个参数)
...
export const useProjects (param?: PartialProject) {...const fetchProject () client(projects, { data: cleanObject(param || {}) })useEffect(() {run(fetchProject(), { rerun: fetchProject });// eslint-disable-next-line react-hooks/exhaustive-deps}, [param]);return result;
};
...编辑 src\utils\use-async.ts(为 run 新增 runConfig)
...
export const useAsync D(...) {...// run 来触发异步请求const run (promise: PromiseD, runConfig?: { rerun: () PromiseD }) {...setRerun(() () {if(runConfig?.rerun) {run(runConfig.rerun(), runConfig)}});...};...
}; 虽然 定义的 runConfig 是可选参数但是若要下一次 rerun 可用前一次就必须配置好预请求因此在 setRerun 中runConfig 是一定要加的其他地方若是不需要这个功能可以不加 查看页面点击按钮执行 rerun可行了
接下来完善使其编辑后自动 rerun
修改 src\screens\ProjectList\index.tsx(删掉之前测试用的按钮和日志打印为 List 传入 refreshrerun)
...
export const ProjectList () {...return (Container...List refresh{rerun} loading{isLoading} users{users || []} dataSource{list || []} //Container);
};
...修改 src\screens\ProjectList\components\List.tsx(接收传入的传入 refresh并在starProject的最后执行)
...
interface ListProps extends TablePropsProject {users: User[];refresh?: () void;
}// type PropsType OmitListProps, users
export const List ({ users, ...props }: ListProps) {const { mutate } useEditProject();// 函数式编程 柯里化const starProject (id: number) (star: boolean) mutate({ id, star }).then(props.refresh);return (...);
};
查看页面效果完美
下面遗留一些问题
乐观更新 成功 ? 免loading : 回滚并提示 想调用的方法离触发组件太远怎么办 状态提升太复杂的时候不好用全局状态管理 部分引用笔记还在草稿阶段敬请期待。。。
