[React-章节2]记录一下学习react中遇到的知识点

接着上一篇《如何一脸懵逼的学习webpack,react?》,我继续学习了github中的react部分的所有例子。

因为不太懂nodejs和es6之类的,所以零零散散记了一下我觉得还算陌生的知识点,以备后续可以回来速查一下。

环境准备

  • github里的教程没有基于webpack运行,但是此前blog中我已经成功搭建了webpack环境,所以像github里赋值window.xxx变量的方法不要使用,而是采用export/import导出导入es6 class的方式进行开发。
  • 为了编写前端代码,我安装了webstorm。为了编辑器可以正确识别es6,jsx语法,需要进行配置:preferences->Editor->FileTypes,为jsx Harmony选项添加*.js和*.es6后缀的文件识别。之后,在languages&frameworks->javascript中选择reactJsx,这样就可以继续开发了。

ES6语法

  • 建议使用let取代var。因为let是局部作用域,例如:if内定义的变量在if外是无法访问的,而var是可以穿透局部作用域的,不够严格。
  • const不是指对象自身不可修改,而是const变量不能指向其他对象了。
  • export default是指1个module只导出1个包的意思,对应import name from “./path”可以实现导入。
  • 如果一个模块导出了多个符号,那么必须import {name1, name2} from “./path”导入,表示导入模块中某1个或者多个符号。
  • import xxx from “module”和import xxx from “./module”的区别是:前者是加载package.json的dependencies中引入的包,而后者可以引入磁盘上任何js文件。
  • let/const {a, b} = c相当于python里的**解包过程。不过要注意的是,c必须是一个{}字典,而a和b必须是c里的key,如果a和b不是c里的key,其值被赋值为undefined。
  • …varialbe作为右值时是解包,左值时是打包,比如:const {name, …left} = {name: ‘a’, age: 5, sex: ‘f’},那么left是{age:5,sex:’f’}且name是’a’。相反{…left}会解包成age=5,sex=’f’。
  • class不支持static变量,所以必须在class外通过className.variableName=xxx定义,但是es7据说支持static了。
  • 数组[]支持array.filter和array.map方法,挺常用的。
  • 匿名函数写法为:(参数) => {函数体}或者(参数)=>1句表达式。和function(){}的区别在于:匿名函数会把外围的this带入到函数里从而可以直接使用this,而function(){}语法则需要显式的bind(this):function(){}.bind(this)才能带入。
  • 获取类成员函数this.func后,其函数将不会携带this。所以,如果this.func要用于异步callback并且希望访问this,那么可以在构造函数里通过this.func.bind(this)显式的绑定一下,一劳永逸。
  • 简单快速的查阅es6模块相关的语法:点我

react

  • 如果循环生成多个列表元素(例如<li>),那么在render方法里每个子元素都要用key属性来标识唯一身份。因为这样,在重新渲染列表的时候,react才知道哪些是新增,哪些是更新,哪些是删除。
  • props用于父给子组件传递数据,state用于组件内维护状态。一般是上层组件维护state,作为props传递给下层组件。当下层组件发生改变,通过callback通知给上层组件,触发对上层组件state的修改,最后自上而下的重新渲染。
  • react的reader()方法中,可以定义类似onKeyDown这样的事件触发函数,这是react封装的而不是原生的,可以参考这个
  • react的表单在render的时候,其属性分为可控和不可控两种。如果是<input value={xxx}>这种,如果xxx改变则会重新渲染,这称为可控。而不可控,则类似<input defaultValue={xxx},这样即便xxx变量改变,也不会触发input重新渲染。
  • component在生命周期不同阶段都有回调,可以重载做一些事情。例如,在componentDidMount()回调时,代表组件渲染完成,我们可以发起ajax调用服务端拉取数据进行数据填充。
  • 为了使用ajax,我通过npm install jquery安装了jquery。之后在es6文件中通过import $ from “jquery”引入Jquery,之后就调用$.ajax发起了异步的http请求了。
  • render()方法返回false就可以实现不渲染组件的目的。
  • render()方法里的jsx,如果希望某个属性不生成,可以定义为{undefined},例如:

一般基于props来实现,举个例子,这里并没有myClassName属性,所以其值为undefined,最终在页面上你并不会渲染初class属性:

webpack(这是后来追加的,可以回头来看)

  • webpack中,一切皆模块,css和img都可以import导入
  • webpack中,每个entry开始的代码形成一个chunk,其中包括了一个1个bundle.js和1个bundle.css,整个站点就是由1个或者多个chunk组成的。
  • webpack每次编译都有一个全局唯一的hash值,也就是webpack.config.js中见到的[hash:8],而每个chunk也有自己内部的一个唯一hash值,叫做[chunkhash:8]。至于哈希值2种是怎么算的,可以参考:这里
  • webpack和react貌似都在追求一个概念或者目标,就是『一切皆js,数据与页面分离』

接下来,github教程来到了flux和redux,这两插件做的事情都是全局状态维护(可以类比component中的state局部状态)。不过据说redux是flux的升级版与简化版,所以我可能会跳过flux直接进入redux。

不过在学习这些东西之前,我会先尝试基于github最终的sample代码,为TodoItem组件编写对应的css,为TodoApp组件添加一张背景图片,为webpack配置对应的编译插件,这一切都会基于组件化的思路实现,这一切在下一篇中将会逐一的实现。

如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~