官方example 中basic-click-counter

 <script type="text/babel">
var Counter = React.createClass({
getInitialState: function () {
return { count: 0 };
},
handleClick1: function () {
this.setState({
count: this.state.count + 1,
});
},
handleClick2: function () {
hand();
},
render: function () {
return (
<div>
<button onClick={this.handleClick1}>
{this.state.count}
</button>
<button onClick={this.handleClick2}>
{this.state.count}
</button>
</div>
);
}
});
var hand = function(){
alert("sd");
}
ReactDOM.render(
<Counter />,
document.getElementById('container')
);
</script>

其中:

getInitialState 设置初始状态

设置点击事件并非一定用handleClick这个函数名,同样的你可以在创建组件时添加多个点击执行函数,例如handleClick1,handleClick2

利用不同的方式绑定并触发,指的一提的是在这个组件里所有的数据都是双向绑定的,如果你在响应事件中利用setState去改变组件中值,那么

真个组件都会触发相应值的刷新

这里就体现了数据和页面刷新的绑定效果,跟传统需要手动刷新形成对比。

发现问题:且看Counter组件的render函数,我们发现这里使用的是JSX语法,那么对于render函数而言,我们不能动态的创建dom节点,打个比方

倘若一个data数组中存在数据,我们需要根据数组的长度创建一个列表,每一行显示data[i]中的数据。如果在js中很容易利用字符串拼接然后添加到innerHtml

中即可,但是在JSX中目前来看,我是没有看到(但是不排除存在)。

这里需要提及下这种情况的必要性,基本上利用ajax和后台交互,然后将结果显示在前端,这种情况是必然出现的,所以如果你认为没必要了解这种情况,要么就是你还没有工作,

要么就是,你是前端还停留在静态网页的层次

提出猜想方案:

这里的动态创建在实际情况下无非就是实际操作DOM,然而React设计初衷之一就是降低DOM操作带来的性能损耗,所以如果需要动态创建,那么很明显需要的是动态创建虚拟节点,

然后再让react框架本身去实际进行渲染。问题就到如何动态创建虚拟节点上来了,这同样是个非常有意思的思考题,倘若react可以提供一个函数动态创建虚拟节点的函数,那么你动

态创建虚拟节点后,这个虚拟节点同样需要注册到组件中,等到组件状态刷新的时候,也要刷新你新增的这个节点,也就意味着创建虚拟节点的同时还需要绑定。在我看来这条路走下去

确实有些困难。

那么如果我们换个方向思考呢?

对于很多情况下来说,倘若我们把所有的状态都写出来呢?还是上面的问题把数组数据写成表格,首先我们是需要分页的,那么我们不妨写出一页全部行,如果有数据相应的数据填充,

没有就为空,这样子我们很容易实现某一页上的数据显示,然后我们只需要控制不同页面上的数据载入即可,react并没有新增任何dom节点(特指元素节点),只需要切换不同的状态即可

但是,

实际上上面所说的问题还是没有解决,那么问题到底是什么限制了无法动态创建dom节点呢?是react吗,貌似这里是jsx阻止了我们,因为jsx本身是在编译成js之后再去使用,

那么意味着我们很难在编译之前的代码中嵌入相应的部分从而在实际运行中动态编译之后的render函数达到符合预期的结果。js本身是可以达到这个效果的,但是jsx无法达到。

那么问题暂时挂起,待找到答案继续,如果有朋友可以解答这个问题,感激不尽

2017-1-5 天气雨 React 学习笔记的更多相关文章

  1. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  4. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  6. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

随机推荐

  1. 轻量级“集合”迭代器-Generator

    Generator是PHP 5.5加入的新语言特性.但是,它似乎并没有被很多PHP开发者广泛采用.因此,在我们了解PHP 7对Generator的改进之前,我们先通过一个简单却显而易见的例子来了解下G ...

  2. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  3. dubbo服务提供与消费

    一.前言 项目中用到了Dubbo,临时抱大腿,学习了dubbo的简单实用方法.现在就来总结一下dubbo如何提供服务,如何消费服务,并做了一个简单的demo作为参考. 二.Dubbo是什么 Dubbo ...

  4. PHP代码优化

    1 代码优化 1 尽量静态化 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和 ...

  5. 【夯实PHP基础】PHP数组,字符串,对象等基础面面观

    本文地址 分享提纲 1.数组篇 2.字符创篇 3.函数篇 4.面向对象篇 5.其他篇 /*************************** 一.数组篇 Begin***************** ...

  6. Nginx学习笔记--001-Nginx快速搭建

    Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的R ...

  7. 高仿it之家新闻客户端源码

    仿it之家新闻客户端界面,数据为本地假数据.仅实现了新闻模块的功能. 源码下载:http://code.662p.com/list/11_1.html 详细说明:http://android.662p ...

  8. 敏捷转型历程 - Sprint3 Planning

    我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...

  9. C#开发中使用配置文件对象简化配置的本地保存

    C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...

  10. CSS currentColor 变量的使用

    CSS中存在一个神秘的变量,少有人知自然也不怎么为人所用.它就是crrentColor变量(或者说是CSS关键字,但我觉得称为变量好理解些). 初识 它是何物?具有怎样的功效?它从哪里来?带着这些疑问 ...