React生命周期钩子

最新推荐文章于 2024-06-08 11:39:51 发布

Honey-回忆天明

最新推荐文章于 2024-06-08 11:39:51 发布

阅读量309

点赞数

分类专栏： React 文章标签： React 生命周期实例钩子

本文链接：https://blog.csdn.net/Honey_tianming/article/details/83183172

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通过一个简单的实例来了解一下
先来看一下这个生命周期图示
在这里插入图片描述
下面是代码块，引入的JS文件可以自行去官网上下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入react核心库  -->
    <script src="./build/react-0.14.0.js"></script>
    <!--引入react-dom核心库，主要实现dom操作  -->
    <script src="./build/react-dom.js"></script>
    <!--引入browser库,babel编译的核心库，在react中主要是识别浏览器无法编译的jsx语法，转化为浏览器能识别的es5语法  -->
    <script src="./build/browser.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <!--type="text/babel"必不可少，采用babel编译识别jsx语法  -->
  <script type="text/babel">
// 组件的生命周期分成三个状态：

// Mounting：已插入真实 DOM
// Updating：正在被重新渲染
// Unmounting：已移出真实 DOM
// React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

// componentWillMount()
// componentDidMount()
// componentWillUpdate(object nextProps, object nextState)
// componentDidUpdate(object prevProps, object prevState)
// componentWillUnmount()
// 此外，React 还提供两种特殊状态的处理函数。

// componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
// shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
    class Component1 extends React.Component{
      constructor(props){
        super(props)
        this.state={
           number:0 
        }
        this.handleClick=this.handleClick.bind(this)  
      }
      componentWillMount(){
        console.log('componentWillMount()')  
      }
      componentDidMount(){
        console.log('componentDidMount()')  
      }
      componentWillUpdate(nextProps,nextState){
        console.log('componentWillUpdate(object nextProps, object nextState)')  
      }
      componentDidUpdate(prevProps,prevState){
        console.log('componentDidUpdate(object prevProps, object prevState)')  
      }
      componentWillReceiveProps(nextProps){
        console.log('componentWillReceiveProps(object nextProps)')  
      }
      shouldComponentUpdate(nextProps,nextState){
        console.log('shouldComponentUpdate(nextProps,nextState)')
        return true  
      }
      componentWillUnmount(){
        console.log('componentWillUnmount()')  
      }
      handleClick(){
        this.setState({
          number:this.state.number+1  
        })  
      }
      render(){
        console.log('render()')  
        return(
          <div>
             <button onClick={this.handleClick}>add</button>
             <Content number={this.state.number} />  
          </div> 
        )  
      }
    }
    var Content = React.createClass({
      componentWillReceiveProps(nextProps){
        console.log('componentWillReceiveProps(object nextProps)')  
      },
      render(){
        console.log('子组件的render()')  
        return (
          <p>{this.props.number}</p>  
        )  
      }  
    })
    Component1.defaultProps={
      title:"12345678"  
    }
    var app = document.getElementById('app')
    ReactDOM.render(
      <Component1 />,
      app        
    )
    //ReactDOM.unmountComponentAtNode(document.getElementById('app')) 
    //销毁
  </script>   
</body>
</html>

点击前的效果
在这里插入图片描述
点击后的效果

销毁后，也就是把这句话注释打开ReactDOM.unmountComponentAtNode(document.getElementById(‘app’))

Honey-回忆天明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React生命周期钩子

通过一个简单的实例来了解一下先来看一下这个生命周期图示下面是代码块，引入的JS文件可以自行去官网上下载&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="w
复制链接

扫一扫