不会的要多查多问，不然不会的永远不会，哪怕你离会就差了那么一点点
第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]

React - component组件的生命周期

[不指定 2016/10/09 11:05 | by 刘新修 ]

component的生命周期图

getDefaultProps

object getDefaultProps()

执行过一次后，被创建的类会有缓存，映射的值会存在this.props,前提是这个prop不是父组件指定的 
这个方法在对象被创建之前执行，因此不能在方法内调用this.props ，另外，注意任何getDefaultProps()返回的对象在实例中共享，不是复制

getInitialState

object getInitialState()

控件加载之前执行，返回值会被用于state的初始化值

componentWillMount

void componentWillMount()

执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次

render

ReactElement render()

render的时候会调用render()会被调用 
调用render()方法时，首先检查this.props和this.state返回一个子元素，子元素可以是DOM组件或者其他自定义复合控件的虚拟实现 
如果不想渲染可以返回null或者false，这种场景下，React渲染一个<noscript>标签，当返回null或者false时，ReactDOM.findDOMNode(this)返回null 
render()方法是很纯净的，这就意味着不要在这个方法里初始化组件的state，每次执行时返回相同的值，不会读写DOM或者与服务器交互，如果必须如服务器交互，在componentDidMount()方法中实现或者其他生命周期的方法中实现，保持render()方法纯净使得服务器更准确，组件更简单

componentDidMount

void componentDidMount()

在初始化render之后只执行一次，在这个方法内，可以访问任何组件，componentDidMount()方法中的子组件在父组件之前执行

从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求

shouldComponentUpdate

boolean shouldComponentUpdate(   object nextProps, object nextState )
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

这个方法在初始化render时不会执行，当props或者state发生变化时执行，并且是在render之前，当新的props或者state不需要更新组件时，返回false

shouldComponentUpdate: function(nextProps, nextState) {   return nextProps.id !== this.props.id; }
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

当shouldComponentUpdate方法返回false时，讲不会执行render()方法，componentWillUpdate和componentDidUpdate方法也不会被调用

默认情况下，shouldComponentUpdate方法返回true防止state快速变化时的问题，但是如果·state不变，props只读，可以直接覆盖shouldComponentUpdate用于比较props和state的变化，决定UI是否更新，当组件比较多时，使用这个方法能有效提高应用性能

componentWillUpdate

void componentWillUpdate(   object nextProps, object nextState )
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

当props和state发生变化时执行，并且在render方法之前执行，当然初始化render时不执行该方法，需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了

componentDidUpdate

void componentDidUpdate(   object prevProps, object prevState )
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

组件更新结束之后执行，在初始化render时不执行

componentWillReceiveProps

void componentWillReceiveProps(   object nextProps )
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用

componentWillReceiveProps: function(nextProps) {   this.setState({     likesIncreasing: nextProps.likeCount > this.props.likeCount   }); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

componentWillUnmount

void componentWillUnmount()

当组件要被从界面上移除的时候，就会调用componentWillUnmount(),在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等

总结

React Native的生命周期就介绍完了，其中最上面的虚线框和右下角的虚线框的方法一定会执行，左下角的方法根据props state是否变化去执行，其中建议只有在componentWillMount,componentDidMount,componentWillReceiveProps方法中可以修改state值

英文地址：https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

组件的生命周期

组件的生命周期分成三个状态：

  • Mounting：已插入真实 DOM

  • Updating：正在被重新渲染

  • Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

  • componentWillMount()

  • componentDidMount()

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

  • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

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

React - ES6 - Ajax获取接口数据渲染到UI组件【完整示例】

[不指定 2016/09/24 01:22 | by 刘新修 ]

本站PHP后端接口:  http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1

本实例用 ES5 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES5/

JavaScript代码
  1. /****** ES6输入文件[调用模块依赖] ******/  
  2. import React, { Component, PropTypes } from 'react'  
  3. import $ from 'n-zepto'  
  4.   
  5. /****** ES5输入文件[调用模块依赖] ******/  
  6. //var React=require('react');  
  7. //var $=require('n-zepto');  
  8.   
  9. //import * as from './commentList.js'  
  10. //import list from './commentList.js';  
  11.   
  12.   
  13. /****** 本地模拟Array数据******/  
  14. var movies = [  
  15.     {  
  16.         id: 1,  
  17.         name: '速度与激情001',  
  18.         date: 2011  
  19.     },  
  20.     {  
  21.         id: 2,  
  22.         name: '速度与激情002',  
  23.         date: 2009  
  24.     }  
  25. ];  
  26.   
  27. /****** 外部子组件map数组当做模板之用 ES5 + JSX 语法编写 ******/  
  28. var MoviesList = React.createClass({  
  29.     render: function () {  
  30.         // this.props 用于从组件外部传入数据  
  31.         var _movies = this.props._movies;  
  32.         return (  
  33.             <li className="datali">  
  34.         {_movies.id}-{_movies.name}  
  35.             </li>  
  36.         )  
  37.     }  
  38. });  
  39.   
  40. /****** 外部子组件map数组当做模板之用 ES6 + JSX 语法编写 ******/  
  41. let CommentList=class CommentList extends Component {  
  42.     constructor(props) {  
  43.         super(props);  //ES6调用父类构造函数super不能少！  
  44.         this.state = {  
  45.              wording: '你好呀, '  
  46.         };  
  47.     }  
  48.   
  49.     /****** Ajax子组件中[主体模板] ******/  
  50.     render(){  
  51.         return <ul>{this.props.comments.map(this.renderComment)}</ul>;  
  52.     }  
  53.   
  54.     /****** Ajax子组件中[嵌套模板] ******/  
  55.     renderComment({plat,type,name,guid,cre_time,lottery}){  
  56.         return (  
  57.             <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>  
  58.         )  
  59.     }  
  60.   
  61. }  
  62.   
  63. /****** 使用ES6 + JSX 语法编写 class xx extends React.Component{} 创建一个组件 ******/  
  64. class CommentListContainer extends Component {  
  65.     /****** [ES6-constructor||ES5-getInitialState] ******/  
  66.     constructor(){  
  67.         super();  
  68.         this.state = {  
  69.             loading: true,  
  70.             title: '我喜欢的电影',  
  71.             movies: [],  
  72.         comments: []  
  73.     }  
  74.     }  
  75.   
  76.     componentDidMount(){  
  77.         $.ajax({  
  78.               type: 'GET',  
  79.               url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',  
  80.               data: {GUID:'1'},  
  81.               dataType:'jsonp', //告诉Ajax调用$jsonp  
  82.               jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  83.               success: function(data){  
  84.                   var yy=JSON.stringify(data);  
  85.                   var tlist=JSON.stringify(data.enttityList);  
  86.                   //console.log(tlist);  
  87.                   //console.log(this.state.title+'22');  
  88.                   this.setState({  
  89.                         comments:data.enttityList,  
  90.                         lottery:data.enttityList[0].lottery  
  91.                   });  
  92.                   var commentsStr=JSON.stringify(this.state.comments);  
  93.                   console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
  94.                   //console.log(this.state.comments+'33')  
  95.               }.bind(this),  
  96.               error: function(xhr, type){  
  97.                   alert(xhr+type+'Ajax error!');  
  98.               }  
  99.         });  
  100.         //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  101.     }  
  102.   
  103.     render(){  
  104.         return <CommentList comments={this.state.comments}/>;  
  105.     }  
  106. }  
  107.   
  108.   
  109. /****** ES5输出给router ******/  
  110. //module.exports=DemoComponent;  
  111.   
  112. /****** ES6输出给router ******/  
  113. export default CommentListContainer;  
Tags: , , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(6586)

React - ES5 - Ajax获取接口数据渲染到UI组件【完整示例】

[不指定 2016/09/23 21:11 | by 刘新修 ]

本站PHP后端接口:  http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1

 本实例用 ES6 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES6/

JavaScript代码
  1. //import React, { Component, PropTypes } from 'react'  
  2. //import $ from 'n-zepto'  
  3. var React=require('react'); //Es-5
  4. var $=require('n-zepto');   //Es-5
  5.   
  6. //import * as from './commentList.js'  
  7. //import list from './commentList.js';  
  8.   
  9.   
  10. /****** 外部子组件map数组当做模板之用 ******/  
  11. var MoviesList = React.createClass({  
  12.     render: function () {  
  13.         // this.props 用于从组件外部传入数据  
  14.         ar _movies = this.props._movies;  
  15.         return (  
  16.             <li className="datali">
  17.                 {_movies.id}-{_movies.name}
  18.             </li>  
  19.         )  
  20.     }
  21. });  
  22.   
  23. /****** 本地模拟Array数据******/  
  24. var movies = [  
  25.     {  
  26.         id: 1,  
  27.         name: '速度与激情001',  
  28.         date: 2011  
  29.     },  
  30.     {  
  31.         id: 2,  
  32.         name: '速度与激情002',  
  33.         date: 2009  
  34.     }  
  35. ];  
  36.   
  37.   
  38. /****** 使用Es5语法 React.createClass 创建一个组件 ******/  
  39. var DemoComponent = React.createClass({  
  40.     /****** 使用 getInitialState 的返回值作为数据的默认值 ******/  
  41.     getInitialState: function () {  
  42.     // this.state 用于存储数据comments被Ajax赋值要先定义个名称  
  43.         return {  
  44.             loading: true,  
  45.             title: '我喜欢的电影',  
  46.             movies: [],  
  47.         comments: []  
  48.         }  
  49.     },  
  50.   
  51.     componentDidMount: function() {  
  52.     $.ajax({  
  53.         type: 'GET',  
  54.         url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',  
  55.         data: {GUID:'1'},  
  56.         dataType:'jsonp', //告诉Ajax调用$jsonp  
  57.         jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  58.         success: function(data){  
  59.             var yy=JSON.stringify(data);  
  60.             var tlist=JSON.stringify(data.enttityList);  
  61.             console.log(tlist);  
  62.             //console.log(this.state.title+'22')  
  63.             this.setState({  
  64.                 comments:data.enttityList,  
  65.                 lottery:data.enttityList[0].lottery  
  66.             });  
  67.             var slist=JSON.stringify(this.state.comments);  
  68.             console.log(slist)  
  69.             //console.log(this.state.comments+'33')  
  70.         }.bind(this),  
  71.         error: function(xhr, type){  
  72.             alert(xhr+type+'Ajax error!'); //error
  73.         }  
  74.     });  
  75.     //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  76.     },  
  77.   
  78.     render: function () {  
  79.         // this.state 用于存储当前的数据  
  80.         var comments = this.state.comments;  
  81.   
  82.         //var dataHtml=movies.map(<p>{name}</p>);// 注意这里 bind(this) 修正了上下文  
  83.   
  84.     /****** Movies子模板 ******/  
  85.         function renderMovies({id,name}){  
  86.             return <li>{id}-{name}</li>;  
  87.         }  
  88.     /****** Movies大模板[内嵌子模板] ******/  
  89.         //var dataHtml = movies.map(renderMovies);  
  90.   
  91.     /****** Movies大模板[外调子模板] ******/  
  92.         var dataHtml = movies.map(function(movies){  
  93.             return (  
  94.                 <MoviesList _movies={movies}/>  
  95.             )  
  96.     }.bind(this));// 注意这里 bind(this) 修正了上下文  
  97.     //console.log('movies:'+movies+'--'+'dataHtml:'+dataHtml);  
  98.   
  99.   
  100.     /****** Ajax子模板******/  
  101.         function renderComment({plat,type,name,guid,cre_time,lottery}){  
  102.             return <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>;  
  103.         }  
  104.     /****** Ajax大模板 ******/  
  105.         var AjaxHtml = this.state.comments.map(renderComment);  
  106.     //var AjaxHtml='11'  
  107.     console.log('comments:'+comments+'--'+'AjaxHtml:'+AjaxHtml);  
  108.   
  109.     return (  
  110.         <ul>{AjaxHtml}</ul>  
  111.     )  
  112.     }  
  113. });  
  114.   
  115. /****** ES5输出给router ******/  
  116. module.exports=DemoComponent;  
  117.   
  118. /****** ES6输出给router ******/  
  119. //export default DemoComponent;  

 

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

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) | 阅读(3570)

react 嵌套路由相关

[不指定 2016/09/21 12:58 | by 刘新修 ]

 /src/js/app.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. import {render} from 'react-dom';   //render((_component),Dom);  
  3. //import ReactDOM from 'react-dom';     //ReactDOM.render((_component),Dom);  
  4. import getRouter from './getRouter';  
  5. import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router';  
  6.   
  7. /* using an ES6 transpiler, like babel */  
  8. //import { createHistory } from 'history/createBrowserHistory'  
  9. //import createBrowserHistory from 'history/createBrowserHistory';  
  10.   
  11. /* Import Component */  
  12. import Hello from '../components/hello/hello.jsx'  
  13. import Other from '../components/other/other.jsx'  
  14.   
  15. /* ensure test */  
  16. require.ensure(['./test'],function(require){  
  17.     var aModule = require('./test');  
  18.     console.log("xxxx");  
  19. },'test');  
  20.   
  21. /* create history for router */  
  22. //const history = createHistory()  
  23.   
  24. /* Router Config */  
  25. render((  
  26.   <Router history={hashHistory}>  
  27.     <Route path="/" component={getRouter}>  
  28.       <IndexRoute component={Hello} />  
  29.       <Route path="other" component={Other} />  
  30.     </Route>  
  31.   </Router>  
  32. ), document.getElementById('app'));  

/src/js/getRouter.js

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2. export default React.createClass ({   
  3.   render() {  
  4.     return <div>  
  5.       {this.props.children}  
  6.     </div>  
  7.   }  
  8. });  

/src/components/hello/hello.jsx

JavaScript代码
  1. import React, { PropTypes, Component } from 'react';  
  2.   
  3. /* 导入组件样式hello.css */  
  4. import styles from './css/hello.css';  
  5.   
  6. //require("./css/hello.css");  
  7.   
  8. class Hello extends React.Component {   
  9.     render(){   
  10.         return (  
  11.         <div className="hello">  
  12.         <p>Hello World!!!!!!!...</p>  
  13.         <p>cll不错！</p>  
  14.         </div>  
  15.         );   
  16.     };  
  17. };  
  18. export default Hello;  

/src/components/other/other.jsx

JavaScript代码
  1. class Other extends React.Component {  
  2.   render() {  
  3.         return (  
  4.         <div>  
  5.         <p>this is other component!!!</p>  
  6.         <p>111111111cll不错！</p>  
  7.         </div>  
  8.         )  
  9.   }  
  10. }  
  11.   
  12. export default Other;  
Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4276)
第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]