• react生命周期


    <!-- 1 组件的生命周期概述 -->
     意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
     组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
     生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。
     钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
     只有 类组件 才有生命周期。
    
    <!-- 2. 创建时(挂载阶段) -->
    constructor()   render()   componentDidMoun
    
    constructor  创建组件时,最先执行
        1. 初始化state
        2. 为事件处理程序绑定this
    
    render  每次组件渲染都会触发   渲染UI(注意:不能调用setState())
    
    componentDidMount  组件挂载(完成DOM渲染)后  
      1. 发送网络请求
      2. DOM操作
    
        class App extends React.Component {
            constructor(props) {
              super(props)
              // 初始化state
              this.state = {
                count: 0
              }
              // 处理this指向问题
              console.warn('生命周期钩子函数: constructor')
            }
    
            // 1 进行DOM操作
            // 2 发送ajax请求,获取远程数据
            componentDidMount() {
              // axios.get('http://api.....')
              // const title = document.getElementById('title')
              // console.log(title)
              console.warn('生命周期钩子函数: componentDidMount')
            }
        
            render() {
              // 错误演示!!! 不要在render中调用setState()
              // this.setState({
              //   count: 1
              // })
              console.warn('生命周期钩子函数: render')
            
              return (
                <div>
                  <h1 id="title">统计怪兽被打的次数:</h1>
                  <button id="btn">打怪兽</button>
                </div>
              )
            }
        }
        ReactDOM.render(<App />, document.getElementById('root'))
    
    <!-- 3. 更新时(更新阶段) -->
    执行时机:1. setState()  2. forceUpdate()  3. 组件接收到新的props
    说明:以上三者任意一种变化,组件就会重新渲染
    执行顺序:render()   componentDidUpdate()
    
    render   每次组件渲染都会触发 渲染UI(与 挂在阶段 是同一个render)
    componentDidUpdate   组件更新(完成DOM渲染)后
        1 发送网络请求
        2 DOM操作
        注意:如果要setState() 必须放在一个if条件中
    
        class App extends React.Component {
            constructor(props) {
              super(props)
              // 初始化state
              this.state = {
                count: 0
              }
            }
          
            // 打怪兽
            handleClick = () => {
              // this.setState({
              //   count: this.state.count + 1
              // })
          
              // 演示强制更新:
              this.forceUpdate()
            }
          
            render() {
              console.warn('生命周期钩子函数: render')
              return (
                <div>
                  <Counter count={this.state.count} />
                  <button onClick={this.handleClick}>打怪兽</button>
                </div>
              )
            }
          }
          
          class Counter extends React.Component {
            render() {
              console.warn('--子组件--生命周期钩子函数: render')
              return <h1>统计怪兽被打的次数:{this.props.count}</h1>
            }
            
            // 注意:如果要调用 setState() 更新状态,必须要放在一个 if 条件中
            // 因为:如果直接调用 setState() 更新状态,也会导致递归更新!!!
            componentDidUpdate(prevProps) {
              console.warn('--子组件--生命周期钩子函数: componentDidUpdate')
          
              // 正确做法:
              // 做法:比较更新前后的props是否相同,来决定是否重新渲染组件
              console.log('上一次的props:', prevProps, ', 当前的props:', this.props)
              if (prevProps.count !== this.props.count) {
                // this.setState({})
                // 发送ajax请求的代码
              }
          
              // 错误演示!!!
              // this.setState({})
          
              // 获取DOM
              // const title = document.getElementById('title')
              // console.log(title.innerHTML)
            }
          }
        ReactDOM.render(<App />, document.getElementById('root'))
    
    // 4. 卸载时(卸载阶段)
    componentWillUnmount  组件卸载(从页面中消失)   执行清理工作(比如:清理定时器等
    
      class App extends React.Component {
        constructor(props) {
          super(props)
          // 初始化state
          this.state = {
            count: 0
          }
        }
        // 打怪兽
        handleClick = () => {
          this.setState({
            count: this.state.count + 1
          })
        }
        render() {
          return (
            <div>
              {this.state.count > 3 ? (
                <p>怪兽被打死了~</p>
              ) : (
                <Counter count={this.state.count} />
              )}
              <button onClick={this.handleClick}>打怪兽</button>
            </div>
          )
        }
      }
    
      class Counter extends React.Component {
        componentDidMount() {
          // 开启定时器
          this.timerId = setInterval(() => {
            console.log('定时器正在执行~')
          }, 500)
        }
    
        render() {
          return <h1>统计怪兽被打的次数:{this.props.count}</h1>
        }
    
        componentWillUnmount() {
          console.warn('生命周期钩子函数: componentWillUnmount')
          // 清理定时器
          clearInterval(this.timerId)
        }
      }
      ReactDOM.render(<App />, document.getElementById('root'))
    
  • 相关阅读:
    (16)JavaScript的流程控制(js的循环)
    (15)javaScript入门
    (14)定位布局(子级在父级中自由定位 父级在页面中自由定位)
    (0-1)CSS 标签语法的属性
    ACM/ICPC 之 双向链表_构造列表-模拟祖玛 (TSH OJ-Zuma(祖玛))
    手记-数学分析(高等数学)中有关算法效率的公式列举(O,Θ,Ω)
    2014北大研究生推免机试(校内)-复杂的整数划分(DP进阶)
    整数划分问题-解法汇总(暂有DP-递归)
    2014北大研究生推免机试(校内)-垃圾炸弹(基础枚举)
    ACM/ICPC 之 BFS-广搜进阶-八数码(经典)(POJ1077+HDU1043)
  • 原文地址:https://www.cnblogs.com/xm0328/p/14013657.html
Copyright © 2020-2023  润新知