react-笔记（1）
1、概念
1）2013年5月发布。
2）React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。
3）通过引入 JSX 语法，复用组件变得非常容易，同时也能保证组件结构清晰。
4）有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。
2、特点
1）声明式设计 −React采用声明范式
声明式是告诉计算机要去做什么而不管怎么做。
命令式是要描述如何去做。
2）高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。
3）灵活 −React可以与已知的库或框架很好地配合。
4）Jsx语法 − JSX 是 JavaScript 语法的扩展。(对比模版引擎)
5）组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6）单向响应的数据流 − React 实现了单向响应的数据流，这也是它为什么比传统数据绑定更简单。
3、专注视图层
1）React 并不是完整的 MVC/MVVM 框架，它专注于提供清晰、简洁的 View（视图）层解决方案。
2）与模板引擎不同，React 不仅专注于解决 View 层的问题，又是一个包括 View 和 Controller 的库。
3）对于复杂的应用，可以根据应用场景自行选择业务层框架，并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。
4）React 不像其他框架那样提供了许多复杂的概念与烦琐的 API，它以 Minimal API Interface 为目标，只提供组件化相关的非常少量的 API
5）为了保持灵活性，它没有自创一套规则，而是尽可能地让用户使用原生 JavaScript 进行开发。
4、Virtual Dom
一、传统dom更新：
真实页面对应一个 DOM 树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作 DOM 来进行更新
二、虚拟dom：
1) DOM 操作非常昂贵。在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。
2) React 把真实 DOM 树转换成 JavaScript 对象树，也就是 Virtual DOM
5、函数式编程-----react的精髓
它属于"结构化编程"的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。
函数编程式的好处：
1）代码简洁，开发速度快
2）接近自然语言，易于理解
3）更方便代码管理
4）易于“并发编程”
5）代码的热升级
6、JSX语法
1）JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。
2）编译过程由Babel 的 JSX 编译器实现。
3）JSX 的官方定义是类 XML 语法的 ECMAScript 扩展。
4）它完美地利用了 JavaScript 自带的语法和特性，并使用大家熟悉的 HTML 语法来创建虚拟元素。
1、XML基本语法
定义标签时，只允许被一个标签包裹。标签一定要闭合。
2、元素类型
1）小写首字母对应 DOM
2）元素大写首字母对应组件元素
3）注释使用js注释方法
3、元素属性
1）class 属性改为 className
2）for 属性改为 htmlFor
3）Boolean 属性：省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true
4、JavaScript 属性表达式
属性值要使用表达式，只要用 {} 替换 “” 即可
eg：
<input type="text" value={val ? val : ""} />
5、HTML 转义
1）React 会将所有要显示到 DOM 的字符串转义，防止 XSS。
2）后台传过来的数据带页面标签的是不能直接转义的
3）具体转义写法：
var content='<strong>content</strong>'; React.render(
<div dangerouslySetInnerHTML={{__html: content}}> </div>,
document.body
);
4）ReactDOM.render
作用：描画dom
参数1：dom对象
参数2：注入点
参数3：回调函数（渲染是否成功）
eg：
ReactDOM.render(
<div>Hello World!</div>, document.querySelector('#wrapper')
()=>{ console.log("渲染成功") }
);
5）React.createClass
作用：声明组件
render方法：
render: function(){
return (
<input type="button" value="hello world!!!!" /> )
}
