React学习笔记---组件的生命周期

最新推荐文章于 2024-07-05 19:30:49 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-07-05 19:30:49 发布

阅读量137

点赞数

分类专栏： React专栏文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_41880073/article/details/122049119

版权

组件的生命周期

摘要由CSDN通过智能技术生成

组件的生命周期

一、引出生命周期
二、生命周期流程图（旧16.x）
三、生命周期流程图（新 17.x）
四、生命周期总结

一、引出生命周期

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1_引出生命周期</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    //创建组件
    //生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
    class Life extends React.Component {
     

      state = {
      opacity: 1 }

      death = () => {
     
        //卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      //组件挂载完毕
      componentDidMount() {
     
        console.log('componentDidMount');
        this.timer = setInterval(() => {
     
          //获取原状态
          let {
      opacity } = this.state
          //减小0.1
          opacity -= 0.1
          if (opacity <= 0) opacity = 1
          //设置新的透明度
          this.setState({
      opacity })
        }, 200);
      }

      //组件将要卸载
      componentWillUnmount() {
     
        //清除定时器
        clearInterval(this.timer)
      }

      //初始化渲染、状态更新之后
      render() {
     
        console.log('render');
        return (
          <div>
            <h2 style={
     {
      opacity: this.state.opacity }}>React学不会怎么办？</h2>
            <button onClick={
     this.death}>不活了</button>
          </div>
        )
      }
    }
    //渲染组件
    ReactDOM.render(<Life />, document.getElementById('test'))
  </script>
</body>

</html>

二、生命周期流程图（旧16.x）

初始化阶段: 由ReactDOM.render()触发—初次渲染
1）constructor()
2）componentWillMount()
3）render()
4）componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件render触发
1）shouldComponentUpdate()
2）componentWillUpdate()
3）render() =====> 必须使用的一个
4）componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息