React生命周期调用函数介绍
来源:互联网 发布:2017淘宝如何投诉卖家 编辑:程序博客网 时间:2024/06/11 19:03
React生命周期调用函数介绍
var MainComponent = React.createClass({ //设置数据的默认值 getDefaultProps: function () { console.log("getDefaultProps"); return {name: 'null'}; } //在组件加载之前调用一次,返回值作为this.state的初始值 , getInitialState: function () { console.log("getInitialState"); return {count: 0}; }, //在完成首次渲染之前调用 componentWillMount: function () { console.log("componentWillMount"); }, //必选的方法,创建虚拟DOM //只能通过this.state和this.props访问数据 //可以返回null,false或任何React组件 //只能出现一个顶级组件(不能返回数组) //不能改变组件的状态 //不能修改DOM的输出 //一、 render:function () { console.log("render"); return <div>MainComponent</div> }, //二、 render: ()=> { console.log("render"); return <div>MainComponent</div> },// 真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素 componentDidMount: function () { console.log("componentDidMount"); } ,// 组件接收到新的props时调用,并将其作为参数nextProps使用 componentWillReceiveProps: function (nextProps) { console.log("componentWillReceiveProps"); if (nextProps.bool) { this.setState({ bool: true }) ; } },//组件是否需要渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用,以免出现bug shouldComponentUpdate: function () { return true; }, //接受到新的props或者state后,进行渲染之前调用 componentWillUpdate: function () { console.log("componentWillUpdate"); },// 完成渲染新的props或者state调用,此时可以访问到新的DOM元素 componentDidUpdate: function () { console.log("componentDidUpdate"); } //组件被移除之前调用,可以做一些清理工作,在conponentDidMount方法中添加的所有任务都需要在该方法中撤销 , componentWillUnmount: function () { console.log("componentWillUnmount"); }});ReactDOM.render(<MainComponent/>, document.getElementById("content"));
阅读全文
0 0
- React生命周期调用函数介绍
- react生命周期方法介绍
- React 生命周期介绍
- React 生命周期介绍
- React生命周期函数
- react生命周期函数
- react的生命周期函数
- react-生命周期函数
- 3. React 组件生命周期介绍
- React生命周期以及主要的API介绍
- 浅析React生命周期函数的使用
- Android 生命周期函数调用分析
- activity 生命周期以及调用函数
- fragment的生命周期函数介绍
- React生命周期
- React 生命周期
- React生命周期
- React生命周期
- 线程
- Java内存模型与Java线程的实现原理
- PackageManager
- OOP和MVC区别
- 弹性光网络实验一、创建光网络请求及C++源码下载
- React生命周期调用函数介绍
- 方格取数+传纸条
- Rxjava+Retrofit+Mvp的使用实例(基于retrofit2.1.0)
- 微信小程序-页面跳转到对应的顶部tab
- 原生js左右滑动
- スレッド及びレジストリ
- PHP使用星号替代用户名手机和邮箱
- com.mysql.jdbc.Driver 问题
- #define命令的一些高级用法