React Hooks - 学习/实践

ゝ一纸荒年。 2022-12-25 02:55 141阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于学习使用react hooks进行前端项目的开发.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档 <a href="https://www.bilibili.com/video/BV1ev41147DQ?p=1" rel="nofollow">https://www.bilibili.com/video/BV1ev41147DQ?p=1</a>&nbsp; //&nbsp;【全网首发:已完结】React Hook+TypeScript『业务开发思路』【业务开发必备】 --- 推荐 <a href="https://zh-hans.reactjs.org/docs/hooks-intro.html" rel="nofollow">https://zh-hans.reactjs.org/docs/hooks-intro.html</a>&nbsp; // 中文档-Hook文档&nbsp; -- 已通读一遍 <a href="http://www.ruanyifeng.com/blog/2019/09/react-hooks.html" rel="nofollow">http://www.ruanyifeng.com/blog/2019/09/react-hooks.html</a>&nbsp; //React Hooks 入门教程 <a href="http://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html" rel="nofollow">http://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html</a>&nbsp; //&nbsp;轻松学会 React 钩子：以 useEffect() 为例 <a href="https://segmentfault.com/a/1190000019900931" rel="nofollow">https://segmentfault.com/a/1190000019900931</a>&nbsp; //Hooks 与 React 生命周期的关系 &nbsp; <a href="https://zh-hans.reactjs.org/docs/hooks-reference.html" rel="nofollow">https://zh-hans.reactjs.org/docs/hooks-reference.html</a>&nbsp; &nbsp; //&nbsp;Hook API 索引&nbsp; ---- 推荐查阅 &nbsp; 视频: <a href="https://www.bilibili.com/video/BV1fV411d7Ka?p=114" rel="nofollow">https://www.bilibili.com/video/BV1fV411d7Ka?p=114</a>&nbsp; //2020-web前端-React+ant+ts+node入门到实战的开发（react+ant design+typescript+node） <a href="https://www.bilibili.com/video/BV1ev41147DQ?p=1" rel="nofollow">https://www.bilibili.com/video/BV1ev41147DQ?p=1</a>&nbsp; //&nbsp;【全网首发:已完结】React Hook+TypeScript『业务开发思路』【业务开发必备】 --- 推荐 <a href="https://www.bilibili.com/video/BV1o5411j797/?spm_id_from=trigger_reload" rel="nofollow">https://www.bilibili.com/video/BV1o5411j797/?spm_id_from=trigger_reload</a>&nbsp;//&nbsp;&nbsp;【全网首发:更新中】『React Hooks API』手册阅读全套课程【B站专... -- 一起读文档 &nbsp; 2. 整理输出 
 <table> 
 <tbody> 
 <tr> 
 <td> 1.关于理论知识，认真查看文档/视频即可. 暂时不打算再抄写一遍~~~ &nbsp; 2.运用 react + hooks + ts 编写组件的模板写法 -- 上手部分，而且文档暂未找到的东西 内容简概： 
 <blockquote> 
 1_搭建项目、组件化结构分析 
 2_完成Input组件的编写 
 3_创建数据、完成输入待办项功能 
 4_替代useState的useReducer的使用技巧 
 5_完成列表组件的编写 
 6_状态惰性初始化、与localStorage互通 
 </blockquote> 实践代码：【推荐结合视频讲解， 实践/查看代码】 <a href="https://github.com/ningxiaofa/react-hooks-todoList" rel="nofollow">https://github.com/ningxiaofa/react-hooks-todoList</a> <a href="https://www.bilibili.com/video/BV1ev41147DQ?p=1" rel="nofollow">https://www.bilibili.com/video/BV1ev41147DQ?p=1</a> &nbsp; 实践效果如下: <img alt="" height="218" src="https://img-blog.csdnimg.cn/20210105174734371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="350"> 3. 练习小项目 TBD &nbsp; &nbsp; &nbsp; &nbsp; </td> 
 </tr> 
 </tbody> 
 </table>3. 个人思考 react hooks即JavaScript函数, 基于JavaScript做的封装，暴露出api供开发者使用， 其实框架/库都是这样， 基于某些语言， api, 进行更加进一步的封装， 转化而成， 主要是为了方便开发者使用， 快速高效安全地开发项目。 延展： 生活中很多事情/事物都是这样，它们的出现都是为了解决某些问题，但是解决问题这个事本身几乎就是没有尽头的， 所以才会一直维护，更新. 因为这个世界只有变化才是永恒不变的~~ &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 <tr> 
 <td>老子曰： 未始有物&nbsp; 【世界就是虚无，一百年前没有我们， 一百年后也没有我们， 我们终归虚无】</td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

<table> 
 <tbody> 
 <tr> 
 <td> 1.如何在TS+react+hooks中书写对象方式的state 如下: src\components\useStateObj.jsx&nbsp; // 这里并不是ts文件类型, 但下面代码可直接用于tsx文件中 
 <blockquote> 
 import&nbsp;{useState}&nbsp;from&nbsp;"react"; 
 &nbsp; 
 export&nbsp;default&nbsp;function&nbsp;UseStateObj()&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;[myStateObj,&nbsp;setMyStateObj]&nbsp;=&nbsp;useState(()=&gt;({ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name:&nbsp;"test", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact:&nbsp;111111111111, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:&nbsp;"phoenix@seekasia.com", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Job_title:&nbsp;"test&nbsp;email&nbsp;from&nbsp;phoenix", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Salary_range:&nbsp;"1000&nbsp;to&nbsp;3000", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time:&nbsp;"2020-01-01", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) 
 &nbsp;&nbsp;&nbsp;&nbsp;); 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;setMyStateObj({...myStateObj,&nbsp;Name:&nbsp;"william"}); 
 &nbsp;&nbsp;&nbsp;&nbsp;console.log(myStateObj); 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello&nbsp;useStateObj! 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="text"&nbsp;onChange={(e)&nbsp;=&gt;&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setMyStateObj({...myStateObj,&nbsp;Name:&nbsp;e.currentTarget.value}) 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;); 
 } 
 </blockquote> <img alt="" height="903" src="https://img-blog.csdnimg.cn/20201222170851266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1020"> &nbsp; 因为这里直接可推断出数据类型, 可省略, 如果想添加类型约束: &nbsp; src\app\view\landing\landing.tsx 
 <blockquote> 
 &nbsp;&nbsp;const&nbsp;[myStateObj,&nbsp;setMyStateObj]&nbsp;=&nbsp;useState(()=&gt;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;name:&nbsp;string&nbsp;=&nbsp;"william";&nbsp;//&nbsp;Warning:&nbsp;Type&nbsp;string&nbsp;trivially&nbsp;inferred&nbsp;from&nbsp;a&nbsp;string&nbsp;literal,&nbsp;remove&nbsp;type&nbsp;annotation.eslint&nbsp;[即可推断类型,&nbsp;请移除类型声明&nbsp;string]&nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;new_array:&nbsp;string[]&nbsp;=&nbsp;[]; 
 &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name:&nbsp;name, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact:&nbsp;1112123, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:&nbsp;"phoenix@seekasia.com", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Job_title:&nbsp;"test&nbsp;email&nbsp;from&nbsp;phoenix", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Salary_range:&nbsp;"1000&nbsp;to&nbsp;3000", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time:&nbsp;"2020-01-01", 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_array 
 &nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp;&nbsp;} 
 &nbsp;&nbsp;); 
 &nbsp;&nbsp;setMyStateObj({...myStateObj,&nbsp;Name:&nbsp;"williamning"}); 
 </blockquote> <img alt="" height="695" src="https://img-blog.csdnimg.cn/20201222170721785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> 官方似乎推荐使用: one by one define <a href="https://react.docschina.org/docs/hooks-state.html" rel="nofollow">https://react.docschina.org/docs/hooks-state.html</a> &nbsp; 2. react hooks 异步更新state&nbsp; &nbsp;// 20201223&nbsp; 周三 <a href="https://segmentfault.com/q/1010000021998386" rel="nofollow">https://segmentfault.com/q/1010000021998386</a>&nbsp;&nbsp;&nbsp;//&nbsp;react useState 异步回调取不到最新值？见代码 <a href="https://zh-hans.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function" rel="nofollow">https://zh-hans.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function</a>&nbsp; //&nbsp;Hooks FAQ 还需要实践消化~~~ &nbsp; 3. 定义不同stage. 变量也有先后顺序.&nbsp; &nbsp;// 20210317 周三 公司 否则会出现问题. &nbsp; ... </td> 
 </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="http://www.ruanyifeng.com/blog/2019/09/react-hooks.html" rel="nofollow">http://www.ruanyifeng.com/blog/2019/09/react-hooks.html</a>&nbsp; //React Hooks 入门教程 <a href="http://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html" rel="nofollow">http://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html</a>&nbsp; //&nbsp;轻松学会 React 钩子：以 useEffect() 为例 <a href="https://react.docschina.org/docs/hooks-intro.html" rel="nofollow">https://react.docschina.org/docs/hooks-intro.html</a>&nbsp; //&nbsp;Hook 简介 <a href="https://segmentfault.com/a/1190000019900931" rel="nofollow">https://segmentfault.com/a/1190000019900931</a>&nbsp; //Hooks 与 React 生命周期的关系 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...