react

一、发展史
1.起源与facebook的内部项目,主要开发view的js库。
2.app的分类 :Native app原生app(ios,android)->各方面都最优。但不能跨平台
webApp,webpack,Hbulider 打包app->跨平台,硬件支持比较弱。
react native:开发方式如webApp简洁,但是有Native app的性能
二、特点
1.虚拟DOM
2.组件化开发
3.JSX语法(可以不使用,Reat依旧可以运行)可以直接写js
三、使用
1.下载http://reactjs.cn/react/downloads.html
2.引入文件:react.js(React核心库)
react-dom.js(提供与DOM相关的功能)
browser.js(将JSX语法转换为Javascript语法)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

四、ReactDOM.render()
1.作用:用于将模板转换为html并插入到指定的DOM节点
2.使用:ReactDOM.render(模板,DOM节点[,回调函数,一般不用])
五、JSX语法
1.HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写
2.JSX基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析;
3.当要插入的变量是数组时,会展开数组的所有成员
六、组件(Component)
1.React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。
2.方法:React.createClass()
3.注意:
a.组件类的第一个字母必须大写,否则会报错
b.组件类有且只能有一个顶层标签,否则也会报错
c.组件的用法与原生的 HTML 标签完全一致,可以任意加入属性;组件的属性可以接受任意值,字符串、对象、函数等等都可以
d.组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取 e.class 属性需要写成className ,for 属性需要写成htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字
f.所有组件类都必须有自己的 render 方法,用于输出组件
七、this.props.children
1.this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性
2.this.props.children:表示组件的所有子节点
3.this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array
4.React 提供一个工具方法 React.Children 来处理 this.props.children
5.React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object

原文地址:https://www.cnblogs.com/zouxianlu/p/6780047.html