自学react留感（上）

React 起源于 Facebook 的内部项目，作用是：架设ins的网站，优点是：他是声明式设计，高效，灵活。

react只是dom的一个抽象层，并不是web应用的完整解决方案，因为react有两个方面没涉及，一个是代码结构，还有一个是左键中的结构。react衍生出来的react native项目目标更宏伟，希望用web app的方法去写native app。

一，React特点：

声明式设计；高效（可对dom进行模拟，极大限度地减少dom交互）；灵活（可以与很多库和框架和闹得配合）；jsx（javascript的语法扩展）；组件（构建组件这样代码可以复用）；单向响应数据流（减少了重复的代码，这也是为什么他比传统数据绑定更简单）；

二，注意：

  在写react的简单demo时，有几个不同位置，第一个就是文件：

其中react.js是react 的核心库；

react-dom.js是用来提供和dom相关的功能的；

browser.js用来将jsx转换成js的；（这一步挺消耗时间的，不过一般是放在服务器上进行的）

babel.min.js可以把es6代码转化成es5的；

第二个就是script标签：

如果说你用了jsx语法，那么你就要写上type=“text/babel”就是说凡是有jsx的地方都要加上。

ps：jsx{

html语言写在javascript之中不加任何的引号，就是jsx的语法。他可以让html和javascript混写。

当遇到了“<”开头的话就用html解析，要是遇到了“{”的话就是用javascript解析。

jsx是执行更快的，因为他在编译为js代码之后进行了优化（不然用它干啥。。。）；上面的例子中也会发现，用jsx编写模板更加的简单快速，编译过程中就能发现错误

}

三，render：

ReactDOM.render（）是react的最基本方法，将模板转换为html并插入指定的dom节点；

ReactDOM.render(<p>hello</p>,document.getElementById("xxx"));

四，组件：

react可以把代码封装成组件（component）然后就像插入普通标签一样，加到网页中。

方法是：React.createClass（）；

比如：var He=React.createClass({

}).....<He></He>就是这样的方法来创建，用。所有的组件类都必须有自己的render方法，用于输出组件。

注意一下：组件类的第一个字母必须大写（html是小写的），不大写就会报错。组件只能包含一个顶层的标签，否则也会报错

组件的用法和原生的html标签完全一致，可以任意的添加属性。组件的属性可以用this.props对象上获取（this.props.name就是在获取name属性），同样要注意的，要是添加class属性的话，你要写成className。for属性要写成htmlfor。（class和for是js 保留字）。在this.props的获取上有一个例外（现在就学到一个）this.props.children属性表示的是组建的所有子节点。所以他的值可以是三种可能，undefined（组件没有子节点），Object（组件有一个子节点），Array（组件有多个子节点）。

  因为this.props.children的特殊性，react提供了一个工具方法React.Children来处理他，我们可以用下面的方法（更详细的你可以看看官网，好像是有中文的了，不过我没找到，看的英文版）：

 React.children.map():遍历子节点，用来返回Array

 React.children.forEach();和map差不多，不过不返回Array

 React.children.count(children):

 React.children.only(children):

 React.children.toArray(children):

。。。。剩下的明天写，vue 的也应该写写了（写上防止我偷懒

）