React - 学习/实践

迈不过友情╰ 2022-11-30 12:34 241阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于学习react，然后基于react进行项目开发.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 背景： 基于公司现有产品基础上使用react开发构建部分功能. &nbsp; 更多目的： 学习react开发完整强大的前端项目. <img alt="" src="https://img-blog.csdnimg.cn/img_convert/bb6e737e55b150c416884f29d448b9a3.png"> &nbsp; 1.介绍 <a href="https://zh.wikipedia.org/wiki/React" rel="nofollow">https://zh.wikipedia.org/wiki/React</a>&nbsp; //维基百科 <img alt="" height="681" src="https://img-blog.csdnimg.cn/20200824142752140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; 2.学习资料 推荐使用Google搜索&nbsp;react 即可. 资料很多. &nbsp; 文档: <a href="https://reactjs.org/" rel="nofollow">https://reactjs.org/</a>&nbsp; //官网 <a href="https://zh-hans.reactjs.org/" rel="nofollow">https://zh-hans.reactjs.org/</a>&nbsp; //中文网站 <a href="https://zh-hans.reactjs.org/community/support.html" rel="nofollow">https://zh-hans.reactjs.org/community/support.html</a>&nbsp; //&nbsp;Where To Get Support - 推荐 <a href="https://zh-hans.reactjs.org/community/courses.html" rel="nofollow">https://zh-hans.reactjs.org/community/courses.html</a>&nbsp;// 资源清单 - 含免费与付费 <a href="https://www.ruanyifeng.com/blog/2015/03/react.html" rel="nofollow">https://www.ruanyifeng.com/blog/2015/03/react.html</a>&nbsp; //阮一峰 - React 入门实例教程 <a href="https://segmentfault.com/a/1190000012921279" rel="nofollow">https://segmentfault.com/a/1190000012921279</a>&nbsp; //React入门看这篇就够了&nbsp; -- 推荐 <a href="http://huziketang.mangojuice.top/books/react/" rel="nofollow">http://huziketang.mangojuice.top/books/react/</a>&nbsp; //react 小书&nbsp; -- 推荐 <a href="https://www.runoob.com/react/react-tutorial.html" rel="nofollow">https://www.runoob.com/react/react-tutorial.html</a>&nbsp; //React 教程 <a href="http://caibaojian.com/react/" rel="nofollow">http://caibaojian.com/react/</a>&nbsp; //react文档&nbsp; -- 个人觉得讲的不太好 <a href="https://ant.design/docs/react/introduce-cn" rel="nofollow">https://ant.design/docs/react/introduce-cn</a>&nbsp; //Ant Design of React <a href="https://www.npmjs.com/package/react" rel="nofollow">https://www.npmjs.com/package/react</a>&nbsp; //npm - react <a href="https://reactrouter.com/web/guides/quick-start" rel="nofollow">https://reactrouter.com/web/guides/quick-start</a>&nbsp; //英文教程 -&nbsp;<a href="https://reactrouter.com/react-router/web/guides/quick-start" rel="nofollow">Quick Start</a> <a href="https://material-ui.com/zh/" rel="nofollow">https://material-ui.com/zh/</a>&nbsp; //基于react的ui框架 <a href="https://www.bootcdn.cn/react/" rel="nofollow">https://www.bootcdn.cn/react/</a>&nbsp; //cdn&nbsp; <a href="https://roadmap.sh/react" rel="nofollow">https://roadmap.sh/react</a>&nbsp; //React Developer &nbsp; <a href="https://mp.weixin.qq.com/s?__biz=MzAxMTMyOTk3MA==&amp;mid=2456451179&amp;idx=1&amp;sn=f37dc6ff0b5127a8a1f1e06d3524437b&amp;chksm=8cdc10b6bbab99a0e9d48183364ea4fda42323b76f9c11228b0f62bafd6106b0ade0c5babe0b&amp;scene=132#wechat_redirect" rel="nofollow">https://mp.weixin.qq.com/s?__biz=MzAxMTMyOTk3MA==&amp;mid=2456451179&amp;idx=1&amp;sn=f37dc6ff0b5127a8a1f1e06d3524437b</a>&nbsp;//&nbsp;React合集：深入理解JSX &nbsp; 视频教程： <a href="https://search.bilibili.com/video?keyword=react" rel="nofollow">https://search.bilibili.com/video?keyword=react</a>&nbsp; &nbsp;//B站进行react搜索， 一堆. <a href="https://www.bilibili.com/video/BV11t411S7iG?from=search&amp;seid=15039235116439171369" rel="nofollow">https://www.bilibili.com/video/BV11t411S7iG?from=search&amp;seid=15039235116439171369</a>&nbsp; //<a href="https://space.bilibili.com/59489478" rel="nofollow">https://space.bilibili.com/59489478</a>&nbsp;最全的react视频【黑马程序员】 极客时间 - react教程 <a href="https://www.bilibili.com/video/BV1T7411W72T?from=search&amp;seid=14085954855808123707" rel="nofollow">https://www.bilibili.com/video/BV1T7411W72T?from=search&amp;seid=14085954855808123707</a>&nbsp; //&nbsp;2020最新前端_React实战教学【老陈打码】 &nbsp; //&nbsp;React + TS 实践 <a href="https://www.bilibili.com/video/BV1fV411d7Ka?from=search&amp;seid=17373786488141102630" rel="nofollow">https://www.bilibili.com/video/BV1fV411d7Ka?from=search&amp;seid=17373786488141102630</a>&nbsp; &nbsp;//&nbsp;2020-web前端-React+ant+ts+node入门到实战的开发（react+ant design+typescript+node） &nbsp; 全家桶： <a href="https://react-redux.js.org/" rel="nofollow">https://react-redux.js.org/</a>&nbsp; //redux <a href="https://react-guide.github.io/react-router-cn/" rel="nofollow">https://react-guide.github.io/react-router-cn/</a>&nbsp; //react-router <a href="http://www.ruanyifeng.com/blog/2016/05/react_router.html" rel="nofollow">http://www.ruanyifeng.com/blog/2016/05/react_router.html</a>&nbsp; //阮一峰 -&nbsp;React Router 使用教程 &nbsp; 3.实践 3.1.chrome 安装react插件 <img alt="" height="251" src="https://img-blog.csdnimg.cn/20200825104815237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> <a href="https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html#installation" rel="nofollow">https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html#installation</a> <img alt="" height="631" src="https://img-blog.csdnimg.cn/20200825104731267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="888"> &nbsp; <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related" rel="nofollow">https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related</a>&nbsp; <img alt="" height="545" src="https://img-blog.csdnimg.cn/20200825104748186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1119"> &nbsp; 3.2 阮一峰 react demo库 <a href="https://github.com/ruanyf/react-demos" rel="nofollow">https://github.com/ruanyf/react-demos</a>&nbsp; //阮一峰 react demo库 建议个人再走一遍~~TBD &nbsp; 3.3 React.js 小书 <a href="https://github.com/huzidaha/react-naive-book-examples" rel="nofollow">https://github.com/huzidaha/react-naive-book-examples</a>&nbsp; //作者的demos库 <a href="https://github.com/huzidaha/react-naive-book-examples/tree/master/comment-app" rel="nofollow">https://github.com/huzidaha/react-naive-book-examples/tree/master/comment-app</a>&nbsp; //comment-app&nbsp;&nbsp; <a href="http://huziketang.mangojuice.top/books/react/lesson16" rel="nofollow">http://huziketang.mangojuice.top/books/react/lesson16</a>&nbsp; //14-16 <a href="https://github.com/ningxiaofa/reack_little_book_learning" rel="nofollow">https://github.com/ningxiaofa/reack_little_book_learning</a>&nbsp; //个人组织代码练习 4.工程化组织前端项目 <a href="https://blog.csdn.net/william_n/article/details/108244349" rel="nofollow">https://blog.csdn.net/william_n/article/details/108244349</a> &nbsp; 5.&nbsp;前端 - Fetch网络请求 - 学习/实践&nbsp; //&nbsp; 在React中实践&nbsp; &nbsp;--- 20201230 家里 <a href="https://blog.csdn.net/william_n/article/details/111961279" rel="nofollow">https://blog.csdn.net/william_n/article/details/111961279</a> &nbsp; 6. React - Redux使用 - 学习/实践 <a href="https://blog.csdn.net/william_n/article/details/111993028" rel="nofollow">https://blog.csdn.net/william_n/article/details/111993028</a> &nbsp; &nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

<table> 
 <tbody> 
 <tr> 
 <td> 1.关于angular[含angularJS]的介绍 <a href="https://blog.csdn.net/william_n/article/details/104692607" rel="nofollow">https://blog.csdn.net/william_n/article/details/104692607</a> <a href="https://blog.csdn.net/william_n/article/details/105777827" rel="nofollow">https://blog.csdn.net/william_n/article/details/105777827</a> &nbsp; 2.react反模式——将数组的index作为key带来的后果. <a href="http://huziketang.mangojuice.top/books/react/lesson13" rel="nofollow">http://huziketang.mangojuice.top/books/react/lesson13</a>&nbsp;//react 小书 - 渲染列表数据 简单说： 直接用数组的循环计数器&nbsp;<code>i</code>&nbsp;作为&nbsp;<code>key，</code>是掩耳盗铃。 记住一点：在实际项目当中，如果你的数据顺序可能发生变化，标准做法是最好是后台数据返回的&nbsp;<code>id</code>&nbsp;作为列表元素的&nbsp;<code>key</code>。 &nbsp; 原因见： <a href="https://www.jianshu.com/p/c74624223986" rel="nofollow">https://www.jianshu.com/p/c74624223986</a> &nbsp; 3.网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？ --- 知乎 ------ 强烈推荐&nbsp; //20200904 周五 <a href="https://www.zhihu.com/question/31809713" rel="nofollow">https://www.zhihu.com/question/31809713</a> &nbsp; 4.cdn链接 <a href="https://zh-hans.reactjs.org/docs/cdn-links.html" rel="nofollow">https://zh-hans.reactjs.org/docs/cdn-links.html</a> <img alt="" height="846" src="https://img-blog.csdnimg.cn/20201124221350390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="716"> &nbsp; &nbsp; 5.编写react代码的一些规范 
 <table> 
 <tbody> 
 <tr> 
 <td> 1.在 React 中，有一个命名规范，通常会将代表事件的监听 prop 命名为&nbsp;on[Event]，将处理事件的监听方法命名为&nbsp;handle[Event]&nbsp;这样的格式。 因为 Square 组件不再持有 state，因此每次它们被点击的时候，Square 组件就会从 Board 组件中接收值，并且通知 Board 组件。 在 React 术语中，我们把目前的 Square 组件称做“受控组件”。在这种情况下，Board 组件完全控制了 Square 组件。 2.一般来说，有两种改变数据的方式。第一种方式是直接修改变量的值，第二种方式是使用新的一份数据替换旧数据 但是禁止使用第一种方式 &nbsp; 3.key 是 React 中一个特殊的保留属性（还有一个是 ref，拥有更高级的特性）。 当 React 元素被创建出来的时候，React 会提取出 key 属性，然后把 key 直接存储在返回的元素上。 虽然 key 看起来好像是 props 中的一个，但是你不能通过 this.props.key 来获取 key。 React 会通过 key 来自动判断哪些组件需要更新。组件是不能访问到它的 key 的。 组件的 key 值并不需要在全局都保证唯一，只需要在当前的同一级元素之前保证唯一即可。 &nbsp; 4.在井字棋的历史记录中，每一个历史步骤都有一个与之对应的唯一 ID：这个 ID 就是每一步棋的序号。因为历史步骤不需要重新排序、新增、删除，所以使用步骤的索引作为 key 是安全的。 &nbsp; 5.setState是同步还是异步。 多数情况下是异步，但是有时会了获取同步数据， 官方为了处理这种情况， 使用回调函数.如下：可实时打印最新状态 <img alt="" height="504" src="https://img-blog.csdnimg.cn/20201127221506734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="843"> &nbsp; 或者使用async / await 同步方式实现异步操作 <img alt="" height="478" src="https://img-blog.csdnimg.cn/2020112722231381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="679"> &nbsp; &nbsp; 或者参考如下风格: <a href="https://jestjs.io/docs/en/tutorial-react" rel="nofollow">https://jestjs.io/docs/en/tutorial-react</a>&nbsp; &nbsp; // 其中代码风格 &nbsp; 
 <blockquote> 
 // Link.react.js import React from 'react'; 
 const STATUS = { &nbsp; HOVERED: 'hovered', &nbsp; NORMAL: 'normal', }; 
 export default class Link extends React.Component { &nbsp; constructor(props) { &nbsp; &nbsp; super(props); 
 &nbsp; &nbsp; this._onMouseEnter = this._onMouseEnter.bind(this); &nbsp; &nbsp; this._onMouseLeave = this._onMouseLeave.bind(this); 
 &nbsp; &nbsp; this.state = { &nbsp; &nbsp; &nbsp; class: STATUS.NORMAL, &nbsp; &nbsp; }; &nbsp; } 
 &nbsp; _onMouseEnter() { &nbsp; &nbsp; this.setState({class: STATUS.HOVERED}); &nbsp; } 
 &nbsp; _onMouseLeave() { &nbsp; &nbsp; this.setState({class: STATUS.NORMAL}); &nbsp; } 
 &nbsp; render() { &nbsp; &nbsp; return ( &nbsp; &nbsp; &nbsp; &lt;a &nbsp; &nbsp; &nbsp; &nbsp; className={this.state.class} &nbsp; &nbsp; &nbsp; &nbsp; href={this.props.page || '#'} &nbsp; &nbsp; &nbsp; &nbsp; onMouseEnter={this._onMouseEnter} &nbsp; &nbsp; &nbsp; &nbsp; onMouseLeave={this._onMouseLeave} &nbsp; &nbsp; &nbsp; &gt; &nbsp; &nbsp; &nbsp; &nbsp; {this.props.children} &nbsp; &nbsp; &nbsp; &lt;/a&gt; &nbsp; &nbsp; ); &nbsp; } } &nbsp; 
 </blockquote> &nbsp; </td> 
 </tr> 
 </tbody> 
 </table>6.初始化state&nbsp; // 参考 <a href="https://blog.csdn.net/duola8789/article/details/90142891" rel="nofollow">https://blog.csdn.net/duola8789/article/details/90142891</a>&nbsp;&nbsp; // React基础11 React中初始化state的两种方法 &nbsp; ... </td> 
 </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://reactjs.org/" rel="nofollow">https://reactjs.org/</a>&nbsp; //官网 <a href="https://zh-hans.reactjs.org/" rel="nofollow">https://zh-hans.reactjs.org/</a>&nbsp; //中文网站 <a href="https://www.ruanyifeng.com/blog/2015/03/react.html" rel="nofollow">https://www.ruanyifeng.com/blog/2015/03/react.html</a>&nbsp; //阮一峰 - React 入门实例教程 <a href="https://segmentfault.com/a/1190000012921279" rel="nofollow">https://segmentfault.com/a/1190000012921279</a>&nbsp; //React入门看这篇就够了&nbsp; -- 推荐 <a href="http://huziketang.mangojuice.top/books/react/" rel="nofollow">http://huziketang.mangojuice.top/books/react/</a>&nbsp; //react 小书&nbsp; -- 推荐 <a href="https://www.runoob.com/react/react-tutorial.html" rel="nofollow">https://www.runoob.com/react/react-tutorial.html</a>&nbsp; //React 教程 <a href="http://caibaojian.com/react/" rel="nofollow">http://caibaojian.com/react/</a>&nbsp; //react文档&nbsp; -- 个人觉得讲的不太好 <a href="https://ant.design/docs/react/introduce-cn" rel="nofollow">https://ant.design/docs/react/introduce-cn</a>&nbsp; //Ant Design of React <a href="https://www.npmjs.com/package/react" rel="nofollow">https://www.npmjs.com/package/react</a>&nbsp; //npm - react <a href="https://reactrouter.com/web/guides/quick-start" rel="nofollow">https://reactrouter.com/web/guides/quick-start</a>&nbsp; //英文教程 -&nbsp;<a href="https://reactrouter.com/react-router/web/guides/quick-start" rel="nofollow">Quick Start</a> <a href="https://material-ui.com/zh/" rel="nofollow">https://material-ui.com/zh/</a>&nbsp; //基于react的ui框架 <a href="https://www.bootcdn.cn/react/" rel="nofollow">https://www.bootcdn.cn/react/</a>&nbsp; //cdn&nbsp; <a href="https://roadmap.sh/react" rel="nofollow">https://roadmap.sh/react</a>&nbsp; //React Developer <a href="https://blog.csdn.net/william_n/article/details/105848718" rel="nofollow">https://blog.csdn.net/william_n/article/details/105848718</a>&nbsp; //React 还是Vue：这是一个问题? <a href="https://search.bilibili.com/video?keyword=react" rel="nofollow">https://search.bilibili.com/video?keyword=react</a>&nbsp; &nbsp;//B站进行react搜索， 一堆. <a href="https://www.bilibili.com/video/BV11t411S7iG?from=search&amp;seid=15039235116439171369" rel="nofollow">https://www.bilibili.com/video/BV11t411S7iG?from=search&amp;seid=15039235116439171369</a>&nbsp; //<a href="https://space.bilibili.com/59489478" rel="nofollow">https://space.bilibili.com/59489478</a>&nbsp;最全的react视频【黑马程序员】 极客时间 - react教程 &nbsp; <a href="https://mp.weixin.qq.com/s?__biz=MzAxMTMyOTk3MA==&amp;mid=2456451179&amp;idx=1&amp;sn=f37dc6ff0b5127a8a1f1e06d3524437b&amp;chksm=8cdc10b6bbab99a0e9d48183364ea4fda42323b76f9c11228b0f62bafd6106b0ade0c5babe0b&amp;scene=132#wechat_redirect" rel="nofollow">https://mp.weixin.qq.com/s?__biz=MzAxMTMyOTk3MA==&amp;mid=2456451179&amp;idx=1&amp;sn=f37dc6ff0b5127a8a1f1e06d3524437b</a>&nbsp;//&nbsp;React合集：深入理解JSX </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...

![be45d3778feabcf574499852c5dfe03a.png][]

[be45d3778feabcf574499852c5dfe03a.png]: /images/20221123/3adca06f173b42a8a64f83ece0bee900.png