React学习

2017年第一篇

  • UI设计小窍门：如果用户等待时间在1秒以内，不做特别处理；在4秒以内，要显示一个转轮（spinner）；在1分钟以内，要显示一个进度条（progress bar），以及当前进度的百分比；超过1分钟，除了进度条，还要显示预估的结束时间。
  • 中小型的React项目优先考虑Mobx架构，而不是Redux架构。

+首先，JSXTransformer.js将所有text/jsx类型的script当成字符串读取出来，再分析其代码，转换成适用于react.min.js的UI模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** @jsx React.DOM */
React.renderComponent(
  // 这是什么不是字符串，不是数字，又不是变量的参数……WTF
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

// 通过react-tools的结果：

/** @jsx React.DOM */
React.renderComponent(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementyById('example')
);

  • JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML的方式创建React元素。简单的说，每当你需要使用createElement()时，就把这个函数调用部分用渲染目标HTML替换(提醒下，不完全一致，比如class属性要用className代替)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    //定义React组件
    var EzLedComp = React.createClass({
    	//每个React组件都应该事先render()方法
    	render : function(){
    		var e = 
    		
    			//JSX--> 
    			<div>
    				<div className="ez-led">Hello, React!</div>
    				<div className="ez-led">2015-04-15</div>
    			</div>;
    			//<--JSX

    		return e;
    	}
    });
    //渲染
    React.render(
    	<EzLedComp/> , //JSX
    	document.querySelector("#content"));
    		
    //转换后的代码
    //定义React组件
    var EzLedComp = React.createClass({displayName: "EzLedComp",
    	//每个React组件都应该事先render()方法
    	render : function(){
    		var e = 
    		
    			//JSX--> 
    			React.createElement("div", null, 
    				React.createElement("div", {className: "ez-led"}, "Hello, React!"), 
    				React.createElement("div", {className: "ez-led"}, "2015-04-15")
    			);
    			//<--JSX

    		return e;
    	}
    });
    //渲染
    React.render(
    	React.createElement(EzLedComp, null) , //JSX
    	document.querySelector("#content"));

  • 虚拟DOM是React的基石。之所以引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用：

  • 实际上，Virtual DOM包含：
    Javascript DOM模型树（VTree），类似文档节点树（DOM）
    DOM模型树转节点树方法（VTree -> DOM）
    两个DOM模型树的差异算法（diff(VTree, VTree) -> PatchObject）
    根据差异操作节点方法（patch(DOMNode, PatchObject) -> DOMNode）
  • React如何直出：
  • React组件非常简单。你可以认为它们就是简单的函数，接受props和state作为参数，然后渲染出HTML。
  • 在引入React库之后，开发API就通过React对象暴露出来了。我们要做的、能做的，就是：在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。 1、createElement(type,[props],[children…])—在虚拟DOM上创建指定的React元素，参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。2、render(element,container,[callback])—将虚拟DOM上的对象渲染到真实DOM上，参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！
  • React组件：React.createClass(meta)。参数meta是一个实现预定义接口的JavaScript对象，在meta中，至少需要实现一个render()方法，而这个方法，必须而且只能返回一个有效的React元素。

Comments

去留言
2017-02-04
⬆︎TOP