React 速记

大 | 中 | 小
[不指定 2016/09/23 21:06 | by 刘新修 ]

使用ES5||ES6 -- 输入文件示例 [调用所依赖的模块]：

JavaScript代码
  1. /****** ES5调用依赖模块[require]被打包会自动生成关联代码 ******/  
  2. var MyComponent = require('./components/movie-list');  
  3.   
  4. /****** ES6调用依赖模块 ******/  
  5. import MyComponent from './components/movie-list';  

使用ES5||ES6 -- 输出文件示例[输出给被依赖模块]：

JavaScript代码
  1. /****** ES5输出给router ******/
  2. module.exports=DemoComponent;
  3.  
  4. /****** ES6输出给router ******/  
  5. //export default DemoComponent;  
  6.  

使用ES5 -- 创建一个组件：

JavaScript代码
  1. /****** 使用Es5语法 React.createClass 创建一个组件 ******/  
  2. var DemoComponent = React.createClass({  
  3.     /****** 使用 getInitialState 的返回值作为数据的默认值(!return) ******/  
  4.     getInitialState: function () {  
  5.         return {  
  6.             loading: true,  
  7.             title: '我喜欢的电影',  
  8.             // 注意这里将 外部传入的数据赋值给了 this.state  
  9.             movies: []  
  10.         }  
  11.     },  
  12.     /****** 输出HTML模板，此处可以调用子组件******/  
  13.     render: function () {  
  14.         return (  
  15.             <div className="component-hello">  
  16.         {this.state.title}  
  17.             </div>  
  18.         )  
  19.     }  
  20. });  

使用ES5 -- map遍历当前Array并调用渲染数据的[外部]子组件：

JavaScript代码
  1. /****** 使用Es5语法 遍历数组并调用外部子组件 ******/  
  2. var MoviesList=React.createClass({...});  
  3. var dataHtml = movies.map(function(movies){  
  4.    return (  
  5.         <MoviesList _movies={movies}/>  
  6.    )  
  7. }.bind(this));// 注意这里 bind(this) 修正了上下文  
  8. return (  
  9.    <ul>{dataHtml}</ul>  
  10. )  
  11.   
  12.   
  13. /****** 外部子组件map数组当做模板之用 ******/  
  14. var MoviesList = React.createClass({  
  15.     render: function () {  
  16.         // this.props 用于从组件外部传入数据  
  17.         var _movies = this.props._movies;  
  18.         return (  
  19.             <li className="datali">  
  20.         {_movies.id}-{_movies.name}  
  21.             </li>  
  22.         )  
  23.     }  
  24. });  

使用ES5 -- map遍历当前Array并调用渲染数据的[内部]子组件：

JavaScript代码
  1. /****** 使用Es5语法 遍历数组并调用内部子组件 ******/  
  2. function renderMovies({id,name}){  
  3.    return <li>{id}-{name}</li>;  
  4. }  
  5. var dataHtml = movies.map(renderMovies);  
  6. return (  
  7.    <ul>{dataHtml}</ul>  
  8. )  

Ajax获取接口数据并设置到state :

JavaScript代码
  1. componentDidMount(){  
  2.     $.ajax({  
  3.           type: 'GET',  
  4.           url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php', //JSONP接口
  5.           data: {GUID:'1'},  
  6.           dataType:'jsonp', //告诉Ajax调用$jsonp  
  7.           jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  8.           success: function(data){  
  9.               var yy=JSON.stringify(data);  
  10.               var tlist=JSON.stringify(data.enttityList);  
  11.               //console.log(tlist);  
  12.               //console.log(this.state.title+'22');  
  13.               this.setState({  
  14.                     comments:data.enttityList,  
  15.                     lottery:data.enttityList[0].lottery  
  16.               });  
  17.               var commentsStr=JSON.stringify(this.state.comments);  
  18.               console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
  19.               //console.log(this.state.comments+'33')  
  20.           }.bind(this),  
  21.           error: function(xhr, type){  
  22.               alert(xhr+type+'Ajax error!');  
  23.           }  
  24.     });  
  25.     //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  26. }  

react 的事件调用分类

C#代码
  1. 触摸事件：onTouchCancel\onTouchEnd\onTouchMove\onTouchStart  
  2. (只会在移动设备上接受)  
  3.    
  4. 键盘事件：onKeyDown\onKeyPress\onKeyUp  
  5.    
  6. 剪切事件：onCopy\onCut\onPaste  
  7.    
  8. 表单事件：onChange\onInput\onSubmit  
  9.    
  10. 焦点事件：onFocus\onBlur  
  11.    
  12. UI元素：onScroll(移动设备是手指滚动和PC的鼠标滑动)  
  13.    
  14. 滚动事件：onWheel(鼠标滚轮)  
  15.    
  16. 鼠标类型:onClick\onContextMenu(右键)\onDoubleClick\onMouseDown\onMouseEnter\  
  17.      onMouseLeave\onMouseMove\onMouseOut\onMouseOver\onMouseUp  
  18.   onDrag\onDrop\onDragEnd\onDragEnter\onDragExit\onDragLeave\onDragOver\onDragStart  

 

Tags: , , , , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3463)