React学习——Day10

最新推荐文章于 2020-05-04 08:05:45 发布

whuhewei

最新推荐文章于 2020-05-04 08:05:45 发布

阅读量104

点赞数 2

分类专栏： React&webpack 文章标签： react 生命周期函数

本文链接：https://blog.csdn.net/whuhewei/article/details/105436864

版权

React&webpack 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

组件的生命周期

生命周期的概念：每个组件的实例，从创建、到运行、直到销毁，在这个过程中，会触发一系列事件，这些事件就叫做组件的生命周期函数。
React组件生命周期分为三部分：

1.组件创建阶段：特点：一辈子只执行一次

componentWillMount:在渲染前调用
render
componentDidMount:在第一次渲染后调用，之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout,setInterval或者发送AJAX请求等操作。

2.组件运行阶段：按需，根据props属性或state状态的改变，有选择性的执行0到多次

componentWillReceiveProps:在组件接收到一个新的prop时被调用
shouldComponentUpdate:返回一个布尔值，在组件接收到新的props或者state时被调用。
componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。
render
componentDidUpdate:在组件完成更新后立即调用。

3.组件销毁阶段：一辈子只执行一次

componentWillUnmount:在组件从DOM中移除之前立刻被调用。

React生命周期函数图解：

React生命周期函数的使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
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')
);
</script>

</body>
</html>

当第一次加载以上页面时控制台会打印：
Component WILL MOUNT!
Component DID MOUNT!
当点击按钮更新Content组件的值时，控制台会打印：
Component WILL RECEIVE PROPS!
Component WILL UPDATE!
Component DID UPDATE!
当关闭网页时控制台会打印：
Component WILL UNMOUNT!（当然这条信息我们是看不到的，因为页面已经被关闭了）