react

Posted 2020-09-14

一、发展史
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