【React零基础-2022】第3讲：Component 降低App复杂度的重要技术
HTML-код
- Опубликовано: 16 сен 2024
- #React #前端开发 #程序员 #编程
【React 基础系列讲座】第3讲介绍 React的重要知识点 - Component。Component是将降低React App复杂度的重要技术。
在这一期中我们将用实例介绍Component的应用场景，以及使用它一步步降低页面实现复杂度的技巧。
往期【React零基础系列讲座】
• 【React前端程序员】2022 职业发展技...
- 第1讲 创建React App
- 第2讲 JSX
我能转行程序员吗？ • 什么样的人适合【转行程序员】- 这5要素你具...
转行程序员如何开始 • 【转行程序员】编程零基础 如何自学6个月 转...
程序员要学多少技术 • 【前端程序员】2022 职业发展技术路径图 ...
程序员求职简历 • 【英文简历 Resume】如何10秒钟抓住人...
编程, 编程入门, 转行程序员, 转行码农, 编程零基础, JavaScript, css, codeamp, 北美工作, python, 零基础入门, 程序员, java, CS, 编程语言, 北美程序员, 自学程序员, 前端工程师, coding, self study coding, 转行, freecodecamp, programming, 自学编程, 编程bootcamp, 前端编程, 后端编程, 编程入门, 算法, 面试, 学编程, 编程教程, 学java, 学python, leetcode, react, 代码, 编程教学, web开发, 学习资源, 干货, java教程, java入门, python教程, python入门, 求职, 码农, 软件工程师, 硅谷, 程序员小姐姐, 程序員找工作, 算法面试, 美国程序员, 算法刷题, 算法训练, 程式设计, 数据结构, 后端开发, 后端工程师, 前端开发, 程序员面试, 转码
![Eminem - Fuel (Shady Edition) feat. Westside Boogie & GRIP [Official Audio]](http://i.ytimg.com/vi/k1OquBida9s/mqdefault.jpg)
很清楚很適合入門，一開始就把這語言的重點用法及架構說得很簡易，比一般所謂的大師有價值多了
全部都是“真材实料”，我听到最多的单词是“comments, comment, props & component ”。多谢小洋老师，收藏了＋💯💯👍
一脸的认真与真诚加上思路清晰，受众得益匪浅，本以为React的学习曲线会很陡峭，经过小洋视频的学习，明白关键还是老师的教学方法，把复杂的东西讲得简单易懂是一种作为博主的最大资源，是金子总会发光，假以时日，必将得出硕果。小洋的脸部灯光建议用环形灯，这样不会在眼睛上形成二个光点，视觉效果会更好。
谢谢James，你的这条评论点亮了我的昨天：）灯光的建议我也试着改善一下，这方面我不太懂，谢谢你！
@@xiaoyangshuo ruclips.net/video/stHUyX7gIWc/видео.html链接视频6:43有介绍灯光和录音设备的介绍，希望对你有帮助。 辅助灯光会使得效果更好，而心中的灯光才是人生路上最美好的指路明灯，祝福你芝麻开花节节高。
一如既往的清晰，一如既往的赞👍
讲的太好了。 受益匪浅
目前正在學習，感謝你的影片
谢谢你这么用心做的视频，每一个都超级赞！
谢谢你看到了我的用心：）
13:56
老師用使用者常用的app,
作為程式碼教學，超生動。
17:11時候，
小洋老師巢狀物件分析很清楚，
容易錯誤百出的程式碼也會提醒
爆赞！👍🏻👍🏻
谢谢小洋老师。学会了props，赞
👍赞
小洋老师请问6'15" 图上既有class="xxx"也有className="xxx"去定义css样式是为什么？查了半天也不懂，和前面几期结合反复看了几遍也没觉得讲到了，太困扰了，望指教，谢谢了。
找到答案了“Note: The class is an HTML Attribute, while the className is a DOM Property.”，用在html tag上时 class只赋初值，在最初生成DOM时有用。
小洋老师你好，请问class和className有什么区别？分别在什么时候用？另外，‘单引号’和“双引号”有什么使用要求吗？谢谢解答
1. class 是用在 HTML 元素內的樣式指定；className 則是 DOM 的屬性。
2. 只要成對存在，使用單引號或雙引號都是正確的。但在字串資料中使用雙引號
（例如： "Hypertext Markup Language is aka "HTML". "）的時候會報錯。此時可透過加入跳脫字元
（例如："Hypertext Markup Language is aka \"HTML\". "），或是改以單引號
（例如：'Hypertext Markup Language is aka "HTML". '）方式處理。
@@ABoLee 谢谢大神解答
@@felixliu8955 不好意思作個補充，react 使用 className 是為了避免與 html 屬性語法保留字: class 衝突做的變動，用途與 class 相同。
请教一下小洋老师，我把所有组件放在components文件夹里，在App.js用import { VideoPlayer, Comments, Recommendations } from './components'; 但terminal 现实can't resolve.请问这是哪里错了呢？
components是一个文件夹，而不是一个文件。import的只能是文件。试试这个吧 import { VideoPlayer} from ‘components/VideoPlayer.js’
@@xiaoyangshuo 因为考虑都是重复从一个文件夹里import，可以把这些合并到一行代码写完。如果项目大了，一个文件引入就占一行，不是很繁琐吗？请问小洋老师，在实际工作中遇到过这种情况怎么处理的呢？
老师好，有问题麻烦请教一下。:)
Comments.js里面调用Comment的地方前面的comment 我理解为是个变量名，
用来接收map里遍历的comment ，但是我想为了清晰区分开，把前面的comment 改成了props。虽然没提示错误，但是画面里啥也不是显示了。
请问是什么原因，这里必须写成Comment comment 么，下面的写法因为什么原因不显示呢。
return (
)
补充: 视频的 17:34
好问题:) 那个comment是props的名字，当Comments在创建Comment的时候，把数据通过comment这个props传进去，那么在Comment.js里就可以从props.comment里读出来。如果你改成了props，也可以，但是你就得把Comment.js改成从props.props里读出来。如果没改就会啥也不显示，因为它还以为要从comment读呢
@@xiaoyangshuo 原来如此，十分感谢老师这么快速且这么详细的解答，一下就明白了🙏周五晚上打扰十分抱歉，祝老师有个愉快的周末^-^