react 入坑思考

react 入坑思考

场景

吾辈为什么要学 react 呢?难道 HTML+CSS+JavaScript 已经满足不了了?是的,传统前端确实满足不了吾辈了,前端在快速发展,而后端手中(甚至眼中)的前端仍然是只有 HTML+CSS+JavaScript+JQuery 的世界。吾辈不想就这样下去,所以想要了解、学习、使用现代前端的内容。
谜之音:难道 vuejs 还不够么?
vuejs 既是国产(阿里),所以文档(中文)相对而言应该是最好的。而且相比于 reactvuejs 的门槛相对而言还是比较低的。至少,不用一开始就接触 webpack(天坑),在不用 webpack 的情况下使用 react 将是很困难的。
或许有人说,react 不是有 create-react-app 可以快速创建 web app 么?然而使用 create-react-app 之后,一大波僵尸(概念)将会袭来。

对白

让我们先来看一段对白

问:react 好像不推荐在浏览器中直接使用 <script> 标签引入呢?
答:是呀,你需要 npm/yarn 这类工具呢
问:npm 是什么?
答:npm 能帮助我们管理依赖的库 只要 install 一下就可以啦
问:那么安装的包要怎么引用呢?
答:你需要用 commonjs/es2016 之类的方式引入呢?
问:等等,commonjses2016?这都是什么呀?
答:哦,这是一种 js 模块化的规范而已,我们只要知道 importexport 就好啦?
问:嗯,那么我应该在哪里写 HTML
答:不不不,react 里面没有 HTML,只有 jsx
问:OMG,jsx 又是什么?
答:一种 js + xmldsl,语法上很像 HTML,no problem!
问:那写完的的 jsx 组件怎么在浏览器中查看啊?
答:你需要使用打包工具,例如 webpack,将 jsx 打包成 HTML+JavaScript 才行
问:额,不是没有 HTML 了么?
答:写的时候没有,但浏览器只认识 HTML/CSS/JavaScript,所以最终还是要变成这些才行呀
问:嗯,那么 webpack 是什么呢?
答:现代前端的一个打包工具
问:好的,那我去看看文档
一段时间后。。。
问:我看了 webpack 官网的文档,但还是不明白应该怎么打包
答:额,不行的话就用 create-react-app 吧。它会自动帮你生成一个完整配置的项目的,你只要懂得配置的意思并且会修改就好了。
问:于是,我开始了愉快的 react 之旅。。。个鬼呀!idea 怎么没提示?
答:额,你需要插件,不过更推荐 vscode,毕竟已经是事实上的前端标准编辑器了。
问:也就是说,我又要用一个新的 IDE 了?
答:不是啦,vscode 只是一个编辑器,比 idea 轻量太多了。而且,vscode 对前端生态支持很好哦
一段时间后。。。
问:我写了几个组件,但不知道应该怎么控制页面跳转?我好像并不能在后端映射到组件呀
答:react 需要使用 react router 之类的前端路由,现在前端的跳转由前端来控制就好了
问:所以说,不能使用 java 来控制么?≥﹏≤
答:额,可能真不行,为什么不用 react router 呢?
问:好吧,我先去看看。。。
问:唉,组件之间的交互好麻烦呀,每次都要依赖传递 props
答:哦,你可以尝试一下状态管理。例如 redux
问:redux?那是什么?
答:react 中的一个状态管理,可以不用一层层的传递 props 了呢
问:听起来很不错,我现在就去看一下!
问:两天后,woc,redux 去死吧?就想改个状态怎么这么麻烦,而且异步那里什么鬼?(ノ =Д=) ノ ┻━┻
答:看来你不适合 react,或许你可以看看 vuejs,更简单一点。国产,中文文档齐全,门槛很低的呢!

诚然,以上的问题不一定是指 react 本身,但依赖于如此之多的工具,本就造成了 react 的复杂性。

思考

看完以上对话,或许吾辈看起来很讨厌 react 的样子?
事实上,吾辈第一次学习现代前端的时候,就是从 react 开始的,然后基本上就像上面的对话所述,直接败退了,然后滚去学了一段时间的 vuejs
然而,直到最近,吾辈发现 vuejs 的生态实在太小了。最开始吾辈就了解过这两个框架,也知道 vuejs 的生态很小,然而确实没想到会这么小。。。
深层次来讲,vuejs 毕竟是国产,毕竟是阿里,所以还是慎用。想想 Dubbo 放弃维护Ant Design 圣诞彩蛋,一切皆是不言自明的!

现在再看 react,感觉简单了一些。一方面,由于 vuejs 的原因,接触到了 es6/npm/yarn/webpack/babel/vscode 这些前端工具链,对现代前端有了基本的概念与认知。不再因为某些代码看不懂而卡住,也不会面对各种工具一脸懵逼了。