开放原子开发者工作坊

  这周二学习了ReactJs，颠覆了之前学习的思路。

  React 起源于 Facebook 的内部项目，就在2013年5月开源了。代码逻辑简单，但是思维方式，我一时间有点转换不过来。

  

ReactJs

 一、填空题

1、ReactJs不是一个____________，而是一个_________，可以视为mvc中的__________。

2、ReactJs的两个特点是：__________________和____________________。

3、React.render(<h1>Hello,world</h1>,document.getElementById(‘div1’));

   (1) React.render的第二个参数是否能用jQuery来获取DOM节点？_____________。

   (2)简述以上代码的意思___________________________________________。

4、Browser.js 的作用是:________________________________________________。

5、React.createClass 用于生成_________________，第一个字母必须_________，且只能包含一个_________________。

6、添加组件属性时要注意：class属性要写成_______________________。

7、ref的用法类似于______________________________。

8、getInitialState是用来_________________________，在组件生成的时候只生成______；render可以执行_______________。

9、getInitialState中的内容可以通过__________________________来访问。

 

 

 

二、问答题

1、请简述什么是高效的虚拟DOM。

 

 

 

2、请写出在ReactJs中的两种遍历方法。

 

 

 

 

 答案：

一、填空题
1、框架，库，V（View）
2、虚拟DOM，组件化
3、（1）不能
（2）将一个h1标签插入一个id名为div1的节点中
4、将 JSX 语法转为 JavaScript 语法（这一步很消耗时间，实际上线的时候，应该将它放到服务器完成）
5、生成一个组件类，大写，顶层标签
6、className
7、事件委托
8、初始化状态变量，一次，多次
9、this.state

 

二、问答题
1、每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。
2、forEach和map用法相同