基于html的前端
是一个为数据提供渲染为HTML 的视图的开源 JavaScript 库
本质问题归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上
用户界面的状态
=》状态
=》属性
react解决 自动DOM
虚拟DOM,决定了哪个dom可以修改
react专注于mvc框架中的v，顺应了web开发组件化的趋势
react核心是组件，组件可以嵌套，目的是复用，降低测试难度，代码复杂度
特点：
1声明式样设计----采用声明范式，轻松描述应用
2高效--虚拟DOM,通过对DOM的模拟，最大限度减少了对
3灵活---可以与已知框架进行很好的配合
4jsx ，js语法的扩展
5组件----构建组件，使得代码更加容易得到复用
6单向响应的数据流-------实现了单向响应的数据流，从而减少了重复代码，这也是为什么比传统数据绑定更简单
安装 1* npm react
2*npm react-dom
React.creatElement('element string,ReactClass',attr|null,'string|object react Class、ReactElement')
React.creatElement(标签名，属性，没有就写成null),创建出来的是虚拟DOM
var divs=React.createElement('div',{'className':'aaa','title':'hello'},'hello world')
-------class有特殊用法
attr 属性 {}
当前组件子元素
string/React组件/ReactElement
reactDOM.render('组件'，组件渲染的DOM,渲染完成回调函数) 方法
把组件渲染到指定DOM位置
浏览器只认识html,css,js
html+js混合去写=>jsx
***********************
创建组件，必须写参数render方法，且第一个字母必须大写,因为要和html标签区分，
组件名称。驼峰命名
注意：不要使用js原生代码，例如for和class,要替换成htmlFor和className
jsx=javascript XML 是一种在React组件内部构建标签的类XML语法
var Test=React.createClass({
render:function(){
return (
'呵呵呵呵呵呵'
)
}
})
**********为什么要用jsx:
---可以提高组件的可读性
---增强语义化
---结构清晰直观
---抽象化
---代码模块化
---不需要学习新语法（js+XML）
使用表达式
1.只能返回一个组件
表达式内可以写：
1写变量、数组
2运算符
3字符串，数组的方法
4函数调用
特殊属性
1 dangerouslySetInnerHtml
不能直接给，要先转换{{__html:}}
2 ref 给return里的标签绑定类名，便于外部操作
3 key 提升性能
###使用babel编译jsx
npm install -g babel-cli
npm install babel-preset-react
babel index.js -o a.js // babel index.js -o a.js
新建文本文档 .babelrc
文档中书写
{
"presets": ["react"]
}
babel jsx -d js -w
所谓组件，就是状态机器
React将用户看做简单的状态机器
组件的生命周期：
will将要 did已经，会在某些行为发生之后调用
初始化阶段：组件插入到DOM中
getDefaultProps 获取默认属性
getInitialState 获取初始化状态
componentWillMount 组件将要装载
组件即将被装载到页面中，也是render之前最后一次修改状态的机会
render 组件开始渲染 虚拟DOM=>真实DOM
componentDidMount 组件装载完成
运行中阶段： 组件被重新渲染，查明DOM是否被渲染
销毁阶段：组件从DOM中被移除
+++++++++++++++组件不能修改自己的属性
props自己不能修改属性，只能通过父亲修改
state组件自己管理自己的状态
自定义默认属性 getDefaultProps
运行中的生命周期函数
******componentWillReceiveProps 父级属性发生变化会触发
******shouldComponentWillUpdate 属性或状态发生变化必须返回一个对象
ComponentWillUpdate
render
ComponentDidUpdate
componentWillUnmount销毁时调用
谢谢
渲染组件
1属性组件、状态
1>给组件 默认属性
getDefauleProps
2>className
不会加到标签上 组件上所有属性不会自动加到标签身上
3>通过getdefalutProps加的默认属性会被组件上添加的属性覆盖
addEventListener(事件，事件处理程序，true)
true 是冒泡，false是捕获
##IE不支持
事件流的影响
1/优化事件绑定
2/给后添加元素绑定事件
React事件处理
将事件处理器绑定到组件上处理程序，在事件被触发的同时，更新组件内部状态
对js事件进行了
React中实现的事件有：
1//事件委托 ，天然的事件委派
2//原生事件，在Did方法里通过addEventListener绑定的事件就是浏览器原生事件
onclick onContextMenu
触控事件
onTouchCancel onTouchEnd onTouchMove onTouchStart
剪贴板事件
onCopy onCut onPaste
网友评论