亲宝软件园·资讯

展开

React 组件生命周期 实例讲解React 组件生命周期

菜鸟教程 人气:0

在本章节中我们将讨论 React 组件的生命周期。

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

生命周期的方法有:

这些方法的详细说明,可以参考官方文档

实例

以下实例在 Hello 组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒重新设置组件的透明度,并重新渲染:

class Hello extends React.Component {
 
 constructor(props) {
   super(props);
   this.state = {opacity: 1.0};
 }
 
 componentDidMount() {
  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 () {
  return (
   <div style={{opacity: this.state.opacity}}>
    Hello {this.props.name}
   </div>
  );
 }
}
 
ReactDOM.render(
 <Hello name="world"/>,
 document.body
);

运行结果

以下实例初始化 state , setNewnumber 用于更新 state。所有生命周期在 Content 组件中。

class Button extends React.Component {
 constructor(props) {
   super(props);
   this.state = {data: 0};
   this.setNewNumber = this.setNewNumber.bind(this);
 }
 
 setNewNumber() {
  this.setState({data: this.state.data + 1})
 }
 render() {
   return (
     <div>
      <button onClick = {this.setNewNumber}>INCREMENT</button>
      <Content myNumber = {this.state.data}></Content>
     </div>
   );
  }
}
 
 
class Content extends React.Component {
 componentWillMount() {
   console.log('Component WILL MOUNT!')
 }
 componentDidMount() {
    console.log('Component DID MOUNT!')
 }
 componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
 }
 shouldComponentUpdate(newProps, newState) {
    return true;
 }
 componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
 }
 componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
 }
 componentWillUnmount() {
     console.log('Component WILL UNMOUNT!')
 }
 
  render() {
   return (
    <div>
     <h3>{this.props.myNumber}</h3>
    </div>
   );
  }
}
ReactDOM.render(
  <div>
   <Button />
  </div>,
 document.getElementById('example')
);

运行结果

加载全部内容

相关教程
猜你喜欢
用户评论