前端开发React开发框架介绍及使用

React核心内容?虚拟DOM对象?jsx语法：主要用于创建虚拟DOM对象?组件?组件声明周期?三大属性组件实例对象：props,refs,stateReactJSX?React定义了一个类似于XML的JS扩展语法：XML+JS?作用：用于创建react虚拟DOM对象?可以直接在js中设置标签，但标签需要放在{}中设置js?解析显示js数组时，会自动遍历显示?将数据转换成Label数组：?varliArr=dataArr.map(function(item,index){return{item}>})注意：?便签必须有终止符?标签class属性必须是className属性?便签的style属性值必须是：{{clolor:'red',width:12}}VirtualDOM?虚拟DOM的定义：?虚拟DOM（元素）是一个通用的js对象，准确的说是一棵倒置的对象树?虚拟DOM保留了真实的层次关系和基本属性DOM，与真实的不同DOM一一对应?如果只更新虚拟DOM，页面不会重绘，大大提高了绘制效率?VirtualDOM算法的基本步骤?使用JavaScript对象结构来表示结构DOM树，然后用这个树结构构建一个真正的DOM树，插入到文档中。?当状态改变时，重建一个新的对象树。然后将新树与旧树进行比较，并记录差异。?将步骤2中记录的差异应用于步骤1中构建的真实DOM树，并更新前端训练视图。?深入理解?虚拟DOM本质上是JS和DOM之间的缓存。类似于CPU和硬盘的缓存原理。ComponentReact是组件编码开发的基本理解和使用组件：?自定义标签：组件类（函数）/标签?创建组件类?//方法-：无状态函数（最简洁，推荐）functionMyComponent1(){return

自定义组件

;}//方法二：ES6类语法（复杂组件，推荐）classMyComponent2extendsReact.Component{render(){return

自定义组件

;}}//方法三：ES5旧语法（不推荐）varMyComponent3=React.createClass({render(){return

自定义组件

;}})渲染组件标签ReactDOM.render(,容器元素);ReactDOM.render()渲染组件标签的基本流程React内部维护一个组件实例对象/调用组件函数获取虚拟DOM对象解析虚拟DOM为真实DOM插入指定页面元素内部props集合所有组件标签属性的对象?为标签分配属性，保存外部数据（可能是一个函数）?读取组件内部的属性：this.props.propertyName?功能：从目标组件外部传递到组件内部数据?限制props中属性值的类型和必要性?Person.propTypes={name:React.ProTypes.string.isRequired,age:React.ProTypes.number.isRequired}?扩展属性：添加对象的所有属性传递通过props?组件组合?组件标签包含子组件标签?拆分组件：拆分界面并提取组件?通过props传递数据引用?组件包含n个带有ref属性的标签元素的集合对象?将ref属性赋值给操作目标标签，并进行标记?获取组件内部的标签对象：this.refs.refName（获取标签元素对象即可）this.refs.username//返回输入对象?功能：操作组件内部真实的便签dom元素对象状态?组件称为“状态机”，页面的显示为基于组件数据的状态属性来显示?初始化规范：constrctor(){super();this.state={stateName1:stateValue1;stateName2:stateValue2;};}?读取并显示this.state.stateName1;?更新状态-->更新接口：this.setState({stateName1:stateValue1});事件处理?在注释中添加属性：onXxx={this.eventHandler}?在组件中添加事件处理方法eventHandler(event){}?在自定义方法中将this设为组件对象?在构造函数中绑定(this)?constructor(道具）{超级（）;this.state={isLike:false};this.changeLink=this.changeLink.bind(this);}changeLink(){this.setState({isLink:!this.state.isLike;})}?使用箭头函数定义方法（需要ES6模块化编码）?classBrokenButtonextendsReact.Component{render(){return(设置背景为红色);}handleClick(){this.setState({backgroundColor:"red"});}}render(,document.getElementById("root"));实现一个双向绑定组件?React在考虑数据流的时候?需要通过onChange来监听实现，或者使用订阅方式PusSubJShttps://github.com/mroderick/...（类似Android的EventBus）组件生命周期---初始化阶段---1。设置组件的默认属性staticdefaultProps={name:'Kobe',age:40};//orCounter.defaultProps={name:'Kobe'}2.设置组件constructor()的初始化状态{super();this.state={number:0}}3.componentWillMount()：在组件渲染到页面之前触发，此时可以进行启动定时器、向服务器发送请求等操作4.render()：组件渲染5.componentDidMount()：在之后触发组件已经渲染到页面中了：此时页面中有真实的DOM元素，可以进行DOM相关的操作---运行阶段---6.compomentWillReceiveProps()：组件接收属性时触发.7.shouldComponentUpdate()：当组件接收到新的属性，或者组件的状态改变时触发。组件首次呈现时不会触发。shouldComponentUpdate(newProps,newState){if(newProps.number<5)returntrue;returnfalse}//钩子函数可以接收两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。一般我们使用这个功能来优化性能：当一个React项目需要更新一个小组件时，很可能父组件需要更新自己的state。一个父组件的重新更新会导致其所有子组件重新执行render()方法，形成一个新的虚拟DOM，然后使用diff算法比较新旧虚拟DOM的结构和属性判断组件是否需要重新渲染。这样的操作会造成很大的性能浪费，所以我们开发者可以根据项目的业务逻辑在shouldComponentUpdate()中加入条件判断来优化性能。例如，React提供了一个PureComponent类。当我们的组件继承使用时，当组件更新时，默认会比较新旧属性和状态来判断组件是否更新。值得注意的是，PureComponent执行的是浅层比较，因此当组件状态或属性发生变化时，需要返回一个新的对象或数组。componentWillUpdate()：组件即将更新时触发。componentDidUpdate()：组件更新后触发。页面中生成了一个新的DOM元素，可以进行DOM操作。---销毁阶段---componentWillUnmount()：当组件被销毁时触发，这里我们可以进行一些资源清理操作，比如定时器，取消订阅事件等等。React-router?Router：路由器；?Route：注册路由；?hashHistory：收集和管理路由历史；?IndexRoute：默认子路由组件?Link：生成标签；?hashurl：在urlhash前加#成为映射url，#后面的url也叫分片标识符；?更改hashurl不会更新浏览器，但会添加浏览历史记录。ReactajaxReact没有ajax模块，集成了其他js库（如axios/fetch/jQuery/）来发送ajax请求axios封装了XmlHttpRequest对象的ajaxpromise，可以在浏览器和服务器中使用fetch不再使用XmlHttpRequest对象提交ajax请求fetch是用于提交ajax请求的函数，只有新浏览器内置了fetch为了兼容低版本浏览器，可以引入fetch.js中的哪个方法发送ajax请求并显示只显示一次（请求一次）：componentDidMount()，显示多次（请求多次）：componentWillReceiveProps()作者：zEcong