最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了。

下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习。

在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的变化。组件本质上是状态机;对于特定的输入,它总会返回一致的输出。

       React为每个组件提供的生命周期分三个阶段: 

一、实例化:

  • getDefaultProps:组件初次实例化创建(不管是否成功)才会被调用,后续应用不会再出现。设置组件属性的默认值
  • getInitialState:初始化组件的状态。返回值将会作为 this.state 的初始值
  • componentWillMount:准备加载组件。render之前最后一次修改状态的机会
  • render: 只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出。渲染并返回一个虚拟DOM,React随后会把它和真实的DOM对比来判断是否有必要做出修改 
    • 只能通过this.props和this.state访问数据
    • 可以返回null、false或者任何React组件
    • 只能出现一个顶级组件(不能返回一组元素)
    • 必须纯净,意味着不能改变组件的状态或者修改DOM的输出
  • componentDidMount:在组件第一次绘制之后,会调用 componentDidMount(),通知组件已经加载完成。这个函数调用的时候,其虚拟 DOM 已经构建完成,你可以在这个函数内通过this.getDOMNode()方法访问到它,可以修改DOM,也可以获取到子组件。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求。这个函数也是只被调用一次。这个函数之后,就进入了稳定运行状态,等待事件触发。 
    【注意】当React运行在服务端时,componentDidMount方法不会被调用
//下面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,
//每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
}, componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
}, render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
}); ReactDOM.render(
<Hello name="world"/>,
document.body
);

二、存在期:

随着应用状态的改变,以及组件逐渐受到影响,以下方法将会依次被调用

  • componentWillRecieveProps((object nextProps)): 已加载组件收到新的参数时调用。父组件修改属性触发,可以修改属性、修改状态。输入参数 nextProps 是即将被设置的属性,旧的属性还是可以通过 this.props 来获取;可以根据属性的变化,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用
  • shouldComponentUpdate(object nextProps, object nextState): 组件判断是否重新渲染时调用。输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样,nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件,如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定 UI 是否需要更新,能有效提高应用性能。
  • componentWillUpdate(object nextProps, object nextState): 如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件,并调用 componentWillUpdate()。输入参数与 shouldComponentUpdate 一样,在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态,不能修改属性和状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。
  • render:渲染并返回一个虚拟DOM。只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
  • componentDidUpdate(object prevProps, object prevState): 真实DOM已经完成更新。因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了 prevProps 和 prevState。可以修改DOM
var HelloWorld = React.createClass({
componentWillReceiveProps: function () {
console.log("componentWillReceiveProps 1");
},
shouldComponentUpdate: function () {
console.log("shouldComponentUpdate 2");
return true;
},
componentWillUpdate: function () {
console.log("componentWillUpdate 3")
},
render: function () {
console.log("render 4");
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentDidUpdate: function() {
console.log("componentDidUpdate 5");
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
},
});
React.render(<div><HelloUniverse></HelloUniverse></div>, document.body);

三、销毁&清理期:

最后,当该组件被使用完成后,componentWillUnmount方法将会被调用,在这个函数中,可以做一些组件相关的清理操作,例如取消计时器、网络请求等。

var HelloWorld = React.createClass({
render: function () {
console.log("render 4");
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentWillUnmount: function() {
console.log("BOOOOOOOOOOOOOOOOOM!");
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
if (event.target.value == "123") { //输入值为123时销毁组件
React.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
return; //销毁掉之后return退出
}
this.setState({name: event.target.value});
},
render: function () {
return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
},
});
React.render(<div><HelloUniverse></HelloUniverse></div>, document.body);

            生命周期的回调函数总结

正式学习React( 三)的更多相关文章

  1. 正式学习 react(三)

    有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下reac ...

  2. 正式学习React(五) react-redux源码分析

    磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里  shallowEqual.js export default function shallowEqual(objA, ...

  3. 正式学习React(一) 开始学习之前必读

    为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...

  4. 五分钟学习React(三):纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  5. 正式学习React (七) react-router 源码分析

    学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是 停留在 ...

  6. 正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate

    性能优化 每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护.此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈 ...

  7. 正式学习react(二)

    今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...

  8. 正式学习React(四) 前序篇

    预热 redux 函数内部包含了大量柯里化函数以及代码组合思想 柯里化函数(curry) 通俗的来讲,可以用一句话概括柯里化函数:返回函数的函数 // example const funcA = (a ...

  9. 正式学习React(五) Reactjs 的 PropTypes 使用方法

    propTypes 使用來規範元件Props的型別與必需狀態 var Test = React.createClass({ propTypes: { // required requiredFunc: ...

随机推荐

  1. JavaScriptSerializer类 对象序列化为JSON,JSON反序列化为对象

    JavaScriptSerializer 类由异步通信层内部使用,用于序列化和反序列化在浏览器和 Web 服务器之间传递的数据.说白了就是能够直接将一个C#对象传送到前台页面成为javascript对 ...

  2. java生成json字符串的方法

    例1:将map对象添加一次元素(包括字符串对.数组),转换成json对象一次. 代码: package com.json; //这是使用org.json的程序: import java.util.Ha ...

  3. aliyun 安装图形

    yum安装图形界面: 1) yum groupinstall "X Window System" yum install xclock yum groupinstall -y &q ...

  4. 那些年的那些事CISC和RISC发展中的纠缠

    本文来自http://www.cnbeta.com/articles/224544.htm ARM.ARM.ARM,没错ARM仿佛一夜之间就火了,平板.手机等领域随处可见它的影子,甚至已经有人预言未来 ...

  5. 启动tomcat后struts框架报异常严重: Exception starting filter struts2 Unable to load configuration. - Class: java.net.PlainSocketImpl

    今天刚好宿舍断网,打开电脑,打开ide工具,启动tomcat后,访问web项目工程,页面显示404,查看控制台,运行报错信息如下: 严重: Exception starting filter stru ...

  6. H5页面之iphone6的适配

    兼容iphone各版本机型最佳的方式就是自适应. 1.viewport 简单粗暴的方式: 1 <meta name="viewport" content="widt ...

  7. NSArray 数组操作

    /*---------------------------创建数组------------------------------*/ //NSArray *array = [[NSArray alloc ...

  8. Python和C#基本算法实现对比

    最近在学习python,很多入门的例子又写了一遍,基本上是C#和Python都写了一遍,对比发现语言真是相通啊,只是语法不同而已. python开发也是用的VS,很好用,特别是代码段运行,选中一段py ...

  9. C的xml编程-libxml2(转)

    这里主要讲述libxml2在linux下的使用. (以下内容除了linux下的安装步骤是自己写的,其余均出自http://www.blogjava.net/wxb_nudt/archive/2007/ ...

  10. (ssh整合web导出excel)在ssh框架中使用poi正确导出具有比较高级固定格式的excel 整体过程,查询导出前后台下载

    (一) 接需求  :   需求相关   (贴图 ) 生成三核对文件 1.新增三核对菜单页面中,增加生成三核对文件功能按钮,弹窗可根据变电站.电压等级查询定值单. 2.定值单信息以表格形式展示,根据选择 ...