React 组件生命周期 简单演示
Mounting:已插入真实 DOM ? 生命周期的方法有: 【定时器实例】 import React,{ Component,Fragment } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import PropTypes from 'prop-types'; class Hello extends Component{ constructor(props){ super(props); this.state={ opacity:1 } } componentDidMount(){ this.timer=setInterval(()=>{ var opacity=this.state.opacity; opacity-=0.05; if(opacity<0.1){ opacity=1; } .setState({ opacity:opacity }) },100); } render(){ return( <Fragment> <div style={{opacity:this.state.opacity}}>hello react</div> </Fragment> ) } } ReactDOM.render( <div> <Hello /> </div>,document.getElementById('example') ); serviceWorker.unregister(); ? 以下实例初始化 state , setNewnumber 用于更新 state。所有生命周期在 Content 组件中。 import React,1)">; class AddFn extends Component{ constructor(props){ super(props); { num:0 } this.addNum=this.addNum.bind(); } addNum(){ .setState({ num:this.state.num+1 }) } render(){ ( <Fragment> <button onClick={this.addNum}>点击计数</button> <Text num={this.state.num} /> </Fragment> ) } } class Text extends Component{ constructor(props){ super(props); } componentWillMount(){ console.log('组件将要挂载'); } componentDidMount(){ console.log('组件挂载完成'); } componentWillReceiveProps(newProps){ console.log('组件将要接收参数'); } shouldComponentUpdate(newProps,newState){ return true; } componentWillUpdate(){ console.log('组件将要更新'); } componentDidUpdate(){ console.log('组件更新完成'); } componentWillUnmount(){ console.log('组件将要卸载'( <div>{this.props.num}</div> ) } } ReactDOM.render( <div> <AddFn /> </div>,1)">) ); serviceWorker.unregister(); ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |