周宇盛的博客 学习笔记 读书笔记

React and Node

Node

node有两方面作用:

  • http服务器:响应浏览器的http请求,根据url发送相应的数据
  • data服务器:调用数据库

可以单纯用Node搭建网站,最好加上Express框架、ejs模版,Node制作的网站可以具备调用数据库的能力。但是仅仅用ejs,就没有了React的强大能力。不过ejs也是具有React没法取代的用处的,比如用header.ejs,footer.ejs模版。

React

功能:用于用户端页面的展示。

可以单纯用React搭建网站,但网站是静态的,也就说没有数据库。比如Gatsby就是纯React,有html页面,有bundle.js。浏览器请求页面,根据url决定发送哪一个html文件。

在纯React页面的开发中,因为没有node的服务器功能,只能直接打开html页面,这样会有一些缺点。可以用npm安装live-server插件,从而能创建一个临时的服务器。

Node + React

两者合用时的分工:

  • node仍然负责http服务器和数据库服务器的功能
  • React负责页面的展示

node通过路由决定给浏览器发送什么文件。然后,前端页面通过API请求数据时,node从数据库调用数据,并整理成JSON发送给前端页面,前端页面调用JSON并加入DOM中。

互联网

中国最赚钱的几家互联网公司BAT,百度是人与互联网世界的接口,微信是人与人的接口,淘宝是人与商品的接口。其余做的好的公司都是针对细分市场,滴滴针对出行,知乎针对知识交流,微博针对意见领袖,大众点评针对店铺信息,亚马逊针对图书,京东针对正品的电器,蘑菇街针对女性服装。

手机端

手机App永远是针对功能类软件,看iPhone的电池用量情况,微信永远占最大的一块,其次是支付宝和相机。但这也和我最近都在学技术,不怎么用手机干其他事,用电脑满足大部分需求有关。

将手机上不常用的App全删掉,功能再好也删掉,最后根本没剩几个软件。除了微信和支付宝,都是辅助类的工具软件,虽然也是一个月就打开那么几次,但还是会用到,比如中国银行、浙江联通、印象笔记、Pocket,另外手机管家和FancyDays是一直开启,分别让我随时可以看流量使用情况和距离重要事件节点的天数。但是,如果我换一部新手机,我真正必须装的软件就只有微信和支付宝。

互联网

互联网世界你的产品开发的再酷炫,功能再强大,但人的主要需求永远还是那么几个,人的时间也永远就只有那么些,人所能记住的产品的名字也就那么些。在互联网世界想要真正赚钱,开发出能让用户记住的产品,就必须有真正的突破。

最大的出路就是开发出类似滴滴、知乎、微博、大众点评、饿了么这样,针对特定的尚未解决或未妥善解决的强大需求,利用互联网、软件、人工智能、图像识别,这些技术的力量去满足这些需求。

开发互联网这个金矿,必须要悲观一些,不能太乐观,认为自己的产品的一定能赚钱,这样最后只会白白浪费时间精力。我们应该保持悲观的心态,记住人的需求是有限的,人的时间是有限的,传播渠道是有限的,人们的支付意愿得看你的产品解决了他们多少的需求。我们要真正深入的探索人们未解决的需求,真正的用切身感受去满足这些需求。

命令行工具的配置

Mac上默认的shell是bash,并自带vim,自带终端工具terminal。

shell负责接收用户命令,比如git add .,然后调用相应的应用程序,它是我们控制操作系统的接口。terminal是shell的包装程序,引用What is the difference between shell, console, and terminal?的回答:

The shell is the program which actually processes commands and returns output. Most shells also manage foreground and background processes, command history and command line editing. These features (and many more) are standard in bash, the most common shell in modern linux systems.

terminal refers to a wrapper program which runs a shell. Decades ago, this was a physical device consisting of little more than a monitor and keyboard. As unix/linux systems added better multiprocessing and windowing systems, this terminal concept was abstracted into software. Now you have programs such as Gnome Terminal which launches a window in a Gnome windowing environment which will run a shell into which you can enter commands.

zsh

但是有人开发出了zsh,zsh拥有强大的自动补全功能,而且有大量的插件支持。安装oh-my-zsh后会安装好很多插件,~/.zshrc的plugin参数用于管理这些插件,ZSH_THEME参数用于管理界面主题,oh-my-zsh自带了很多主题,默认的主题是robbyrussell,这个主题我用了很长时间。

另外我尝试了agnoster, powerline, powerlevel9k,这三种主题很类似,它的命令行有很多提示,而且命令行因为有彩色背景,辨识度很高,robbyrussell主题则容易使命令行和输出结果混在一起,命令多的时候让人很难分辨输出结果对应的是哪一条命令行。agnoster是oh-my-zsh自带的,将ZSH_THEME参数设置为agnoster就可以,另外两种需要下载到~/.oh-my-zsh/themes目录,然后也同样需要设置ZSH_THEME参数。经过比较,最后我选择了agnoster主题,如下配图所示。

这三种主题需要终端工具安装特定的字体,我用的是Meslo LG M DZ Regular for Powerline,他可以正确的显示powerline上特殊的符号。

最后还需要将终端工具的显示颜色设置一下,以便让洁面显示效果更清晰,Solarized Dark colorscheme是很受欢迎的一种颜色搭配。

界面颜色和字体是在终端工具的preference里设置,将在Solarized官网下载文件,在preference里倒入相应版本的配置文件,之后可以自己对颜色进行调整;字体也是先下载Meslo字体,打开字体文件,点击安装,然后在终端工具的preference里选择Meslo。我用Mac自带的terminal和另外安装的iTerm都设置了一下,iTerm的显示效果更好。

BTW:shelll和终端工具是分离的,我在iTerm上安装了zsh,terminal上的命令行工具也会由默认的bash变成zsh。在iTerm上安装oh-my-zsh,terminal也能用oh-my-zsh上的插件。但是终端工具的显示颜色和字体是需要在各自的preference里设置的。

vim

vim由当初Unix系统上的vi发展而来,vim的最大特点是跨终端,mac, windows, linux系统上都能运行,而且非常稳定。配置云服务器的时候,少不了要用到。

vim也有很多插件和主题,spf13-vim将很多受欢迎的插件和主题集成在了一起,安装好之后,可以直接通过~/.vimrc.local的colorscheme参数设置主题,最常见的solarized, onedark都有,但是solarized在mac自带的vim上有点问题,然后选择了onedark。

spf13-vim带有vundle插件,vundle是vim的插件管理工具,相当于node的npm,可以用它下载最新版本的vim插件,和用来升级插件。

spf13-vim安装的插件具有比如以下一些功能:

  • 自动补全功能,编辑html的标签,也能像atom/sublime一样自动补全了,比如输入h2然后按Tab键就能自动生成<h2></h2>,而且支持很多种语言。
  • 可以用鼠标控制光标的位置,默认的vim只能用上下左右键控制。
  • indent(锯齿),可以直观地分辨初始标签对应的结束标签。

和atom/sublime一样,vim的快捷键也非常。但不同的是,vim的大多数操作只能用快捷键完成。这两种IDE的学习成本都很高,要同时掌握必然需要很多时间,我目前而言只需要掌握好atom就行了,atom的功能也是很强大的,我现在还没有熟练掌握。atom和sublime差不多,但atom好像更好用一些,就是启动稍微慢一点,而vim等以后有精力或者有需要再学习,否则可能两种都学不成。

BTW:vim和zsh一样,在iTerm上安装好之后,terminal上也能用。

稻盛和夫谈努力与快乐

要到达名人高手的境地,缺乏地道的精进,那是不可能的。我们要从内心喜爱自己的工作,付出不亚于任何人的努力,全神贯注投身于工作,通过这条道路——也只有通过这条道路——我们就会懂得人生的意义和价值,磨砺心志,提升人格,领悟人生的真谛。

要成就事业,充实人生,“勤奋”必不可少。就是要拼命努力,全身心投入工作。

聚精会神,孜孜不倦,克服艰辛后,达到目标时的成就感,世上没有哪种喜悦可以类比。

当然,来自工作的喜悦,并不像糖果那样,一放进嘴里就甜味十足。有格言道:“劳动有苦根甜果。”

工作占据人生最大的比重,如果不能在劳动中、在工作中获得充实感,那么,即使在别的方面找到快乐,最终我们仍然会感觉空虚和缺憾。

认真工作带来的果实,不只是成就感和充实感,它还起到修行的作用,磨练人格,奠定我们做人的基石。

认真投入日常生活的劳动,与通过坐禅获得精神统一,这两者之间并没有本质的区别。

从工作中获取的快乐,和看娱乐节目获得的快乐都是快乐,但是,

  • 这种快乐是不假外求的,我们自己就能获取,不需要看别人在娱乐节目的表演来获取。
  • 这种快乐是不可或缺的,在工作中获取快乐的基础上再去获取其他快乐,才能真正的感受到玩乐的快乐
  • 这种快乐是迫不得已的,想成为名人高手,就必须全身心投入工作,如果从中获取不到快乐,那是痛苦的
  • 这种快乐是自然而然的,全身心投入工作,有苦有甜,我们就会获得快乐,真正喜欢上工作

React Server Render

为什么要Server Render

一个完全用React制作的网站,如果不Server Render,发给浏览器的html文件的DOM将是空的,virtual DOM都在bundle.js里,需要浏览器运行bundle.js才能渲染出完整的DOM。

不server render有两个坏处:

  • 不利于SEO,搜索引擎只能检索html文件,而不能检索js文件
  • 影响网站访问性能,相比静态页面多了本地render的时间,和发起ajax请求的时间。当然,用server render也需要在浏览器发出请求后,在服务器端render一遍然后发给浏览器,仍然会造成一定延迟,除非页面不是实时render。

如果不server render,当页面需要数据时,一般是先给react组件的state设置为一个空数据,然后在componentDidMount里,通过ajax请求获取到数据,并用回调函数将state设置为获取的数据,react监测到state改变,会进行重新render。之所以先设置空数据,是为了避免ajax请求阻碍页面第一次的渲染。

Server Render的两种改进方案

但是在server render中仍然用这种方法,会造成一些浪费。因为服务器在服务器端render好后将完整的html文件和bundle.js发给浏览器,但是react会将上面的过程又过一遍。这是不需要的,因为已经有完整的页面了。这造成了两个浪费,一是多了一次不必要的ajax请求,二是浏览器多了两次不必要的render。

解决办法是,除去给react组件传空数据的环节,直接进行ajax请求,然后进行渲染。因为已经有完整的页面了,不需要担心ajax请求阻碍页面的第一次渲染的问题。这样可以减少一次组件数据为空的一次渲染,不会造成页面“闪了一下”的结果,整个ajax请求的过程都是在后台进行,对用户不会造成任何影响。而且用ajax请求获得的数据得到的virtual DOM和当前页面的DOM一样,React并不会重新重新渲染,因为React只会渲染改变的部分。但是,还是有一次不必要的ajax请求。

要避免这次ajax请求,server可以不仅给broswer发送渲染后的完整html,还发送要用到的数据,数据放在window.initialData对象里。React组件直接调用window.initialData对象里的数据,从而避免发起ajax请求。和上面的方法一样,React会发现virtual DOM和真实的DOM一样,从而不会进行重新渲染。这样就避免了这不必要的ajax请求。

但是,React调用数据产生virtual DOM和server render产生的DOM进行Diff运算,这个环节是无法避免的。因为React要保证有一个virtual DOM在内存中。

BTW

提升网站访问性能可以从三方面入手:

  • 服务器架构
  • 浏览器带宽
  • 代码的设计

这里是从最后一个方面入手。