关于 React 官方纪录片的一系列思考

2023-10-17 20:10

本文主要是介绍关于 React 官方纪录片的一系列思考,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

关于 React 官方纪录片的一系列思考

最近掘金上的一篇热搜文章吸引了我,我先贴一个地址,感兴趣可以查看详情:

React 官方纪录片:我们亲手将 JSX 推向神坛!

其实,这个纪录片可看可不看,早在前几天 B 站也刷到了,好几个前端的账号也有转载,但我依旧没有去看源视频,而就在最近又看到了有博主写了关于记录片的推文,还是好奇点进去看了。

其实有纪录片是个好事儿,也正如大家所说前端还真的像有个小娱乐圈一样,对于程序员来说,也许快乐就是如此简单。

React

说实在,基本上当你使用 React 到一定时间后,你一定会从某些地方听到 Dan 神(上图最右)

但其实我也不知道具体的内容,总之,现在看到这篇文章你也会知道了。

详细内容如果从头到尾看其实也是有点枯燥的,我就挑几个我觉得有意思的地方来说好了。

React 这个框架出来之前其实也是有竞争对手的,也就好像现如今各大厂一样,划分多个 bg,每个 bg 里面玩“赛马”游戏,你这条业务线为我赚到钱了,我就留着你,那条完全看不到方向,直接砍掉,管你技术多好,只能认定选错了方向,拜拜,我要收回资金了。

而在杭州某大厂就流行开源项目这一说法,那么好的资源,却为了 kpi 而 kpi,所以导致多数人很讨厌 kpi 项目,这些项目为他们升了职,马上开始下一个,到最后就没什么人维护了。

当然,只是存在这种现象,我们也应该看到好的一方面。那么 React 其实就是卷出来的,其中有个很有意思的点,也就是前不久刚在 ChoDocs 上写的一篇设计模式,内容也是和 React 相关,地址在这:

容器/演示模式

内容中提到了 React 中的关注点分离是怎样做的,而在纪录片中讲述了当时那个年代并没有组件化这个概念,平常大家所说的关注点分离就是指 HTML、CSS、JS 三权分立,虽然看起来文件整理归纳的不错,但仔细想想,我们是不是应该根据功能、组件来划分,对吧。

而当时 React 的提出,很多人就懵逼了,你这写的啥玩意,但真正的高手往往都是惜字如金的。

这也一下让我联想到《三体》里提到的农场主和火鸡的故事,你只是在你认定的范围里找到了该有的规律,但其实我和你完全不在一个层面。

又或者说这个场景,在非常偏远的地方有个小部落,他们还是在用钻木取火,而这时候你拿出来一个打火机,他们绝对是很吃惊的。

而后 React 又提出了 JSX 语法,开始也是受到各种怀疑,甚至也有用都没用就说不好的。

之后团队做了方向上的转变,过去团队就在说 React 有多么多么好,赶紧来 clone 一下试试看,而是巧妙地说这个框架很有趣,然后开始例举其中好的点,用数据以及示例说话。

联想

其实这和我创建知识星球想法也差不多,过去我可能会说赶快加入,我们星球里有多少多少内容,我们星球会做什么,赶紧加入吧。

但现在不会,有一个宗旨是「不要去舔用户」,也就是不要当个舔狗一样,大家也知道在爱情中谁还没当过舔狗呢对吧,敢说 90% 会有吧。

为什么不要去舔用户呢,如果我像之前那样说加入我们星球有多么好,其实效果可能一般,因为不想加入星球的用户说的再好也不会加入。

那也就是你再怎么去追求那个女生,别人不愿意就是不愿意,舔到最后一无所有…

与之相对的,我们应该是先从自身做起,如果我们定位是专业的,就应该拿出专业的态度出来,例举的计划说到就要做到,比起要做什么,更好的是我们做了什么!

此外,从去年就做打算提供一定的免费名额,到现在我们免费名额也快用完了。去年我们确实有些地方没有做好,经过深度反思之后,我决定要做就先把免费的做好,那可是一年时间呢。

之后立即就开始折腾起来了 ChoDocs,ChoDocs 就是完全免费的内容,连代码每个字符全都是开源的。

这样做了之后,效果很好,其实从我们最初宣传到现在也才过两周,马上我们上半年加入 100 人目标也快完成了,近期待免费名额用完之后,我们应该会调整一下我们上半年的计划了。

那这件事情对自己有啥受益呢?在这主要说我个人吧,过去我的下班时间以及包括工作休息时间,不是追剧就是刷短视频以及玩游戏,看了很多书籍之后渐渐醒悟,其实我想做某件事情,下班后我完全可以去做,也非常喜欢现在这种感觉。

React 这个框架确实经历了很多,一个短的纪录片时长肯定远远不够,但毫无疑问它是一个非常成功的框架,从纪录片中我们也可以学到惜字如金,坚持去做自己认为正确的事情,做一个特立独行的开发者!

结语

这部纪录片还是挺不错的,一个又一个传奇的东西背后一定有许多传奇的故事,这些开发者们保持专注并且相信他们自己创造的东西,至少这背后的团队做到了,非常鼓舞人心。

未知的东西往往会让人感到一定的害怕,但勇于面对之后你会发现其中的奥秘。

最后,看完全文描述之后,对于设计模式又多了一份兴趣,在源码层之上能够大概了解编程上的思想其实是挺有意思的,而阅读源码其实是与框架的各位开发者们交流一样,加油吧,后续快速更新设计模式的内容!

这篇关于关于 React 官方纪录片的一系列思考的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/227674

相关文章

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

【编程底层思考】垃圾收集机制,GC算法,垃圾收集器类型概述

Java的垃圾收集(Garbage Collection,GC)机制是Java语言的一大特色,它负责自动管理内存的回收,释放不再使用的对象所占用的内存。以下是对Java垃圾收集机制的详细介绍: 一、垃圾收集机制概述: 对象存活判断:垃圾收集器定期检查堆内存中的对象,判断哪些对象是“垃圾”,即不再被任何引用链直接或间接引用的对象。内存回收:将判断为垃圾的对象占用的内存进行回收,以便重新使用。

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

Adblock Plus官方规则Easylist China说明与反馈贴(2015.12.15)

-------------------------------特别说明--------------------------------------- 视频广告问题:因Adblock Plus的局限,存在以下现象,优酷、搜狐、17173黑屏并倒数;乐视、爱奇艺播放广告。因为这些视频网站的Flash播放器被植入了检测代码,而Adblock Plus无法修改播放器。 如需同时使用ads

Temu官方宣导务必将所有的点位材料进行检测-RSL资质检测

关于饰品类产品合规问题宣导: 产品法规RSL要求 RSL测试是根据REACH法规及附录17的要求进行测试。REACH法规是欧洲一项重要的法规,其中包含许多对化学物质进行限制的规定和高度关注物质。 为了确保珠宝首饰的安全性,欧盟REACH法规规定,珠宝首饰上架各大电商平台前必须进行RSLReport(欧盟禁限用化学物质检测报告)资质认证,以确保产品不含对人体有害的化学物质。 RSL-铅,

React 笔记 父子组件传值 | 父组件调用子组件数据 | defaultProps | propsType合法性验证

1.通过props实现父组件像子组件传值 、方法、甚至整个父组件 传递整个父组件则   [变量名]={this} import Header from "./Header"render(){return(<Header msg={"我是props传递的数据"}/>)} import React,{Component} from "react";class Header extends

react笔记 8-21 约束性 表单

1、约束性组件和非约束性组件 非约束性组件<input type="text" name="" defaultValue={this.state.msg}></input>这里他的value是用户输入的值 并没有执行操作 只是获取到了msg的值 用户输入不会改变数据非约束性组件需要使用defaultValue获取数据 否则会报错约束性组件<input type="text

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{

react笔记 8-18 事件 方法 定义方法 获取/改变数据 传值

1、定义方法并绑定 class News extends React.Component {constructor(props) {super(props)this.state = {msg:'home组件'}}run(){alert("我是一个run") //方法写在类中}render() {return (<div><h2>{this.state.msg}</h2><button onCli

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注