react-生命周期(尚硅谷学习)

最新推荐文章于 2024-08-29 13:07:02 发布

不流泪的机器猫

最新推荐文章于 2024-08-29 13:07:02 发布

阅读量42

点赞数

文章标签： react.js 学习前端

本文链接：https://blog.csdn.net/qq_40442609/article/details/131865348

版权

旧的生命周期

    class GetInputValue extends React.Component {
      state = { opacity: 1 }
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }
      componentDidMount() {//挂载完毕后执行，只执行一次
        console.log('这里')
        this.timer = setInterval(_ => {
          let opacity = this.state.opacity
          opacity -= 0.1
          if (opacity <= 0) {
            opacity = 1
          }
          this.setState({ opacity })
        }, 200)
      }
      componentWillUnmount() {//将要卸载挂载执行
        clearInterval(this.timer)
      }

      render() {//执行1+n次,初始化和状态更新
        return (
          <div>
            <div style={{ opacity: this.state.opacity }}> 周六去学习</div>
            <button onClick={this.death}>出去浪</button>
          </div>
        )
      }
    }
    ReactDOM.render(<GetInputValue />, document.getElementById('test'))

  </script>
</body>

</html>在这里插入代码片

一、组件挂载时生命周期

class GetInputValue extends React.Component {
      state = { opacity: 1 }
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }
      // componentDidMount() {
      //   console.log('这里')
      //   this.timer = setInterval(_ => {
      //     let opacity = this.state.opacity
      //     opacity -= 0.1
      //     if (opacity <= 0) {
      //       opacity = 1
      //     }
      //     this.setState({ opacity })
      //   }, 200)
      // }
      // componentWillUnmount() {
      //   clearInterval(this.timer)
      // }
      constructor(){
        super()
        console.log('constructor')
      }
      componentWillMount(){
        console.log('componentWillMount')
      }
      componentDidMount(){
        console.log('componentDidMount')
      }
      render() {
        console.log('render')
        return (
          <div>
            <div style={{ opacity: this.state.opacity }}> 周六去学习</div>
            <button onClick={this.death}>出去浪</button>
          </div>
        )
      }
    }
    ReactDOM.render(<GetInputValue />, document.getElementById('test'))

执行顺序

在这里插入图片描述

二、点击+1按钮（组件更新）

在这里插入图片描述

 class GetInputValue extends React.Component {
      state = { sum: 0 }
      add=()=>{
        let sum=this.state.sum+=1
        this.setState({sum:sum})
      }
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }
      shouldComponentUpdate(){//控制组件更新阀门，不写默认为true,true更新，false不更新
        console.log('shouldComponentUpdate')
        return true
      }
      componentWillUpdate(){//组件将要更新
        console.log('componentWillUpdate')
      }
      componentDidUpdate(){//组件更新完毕
        console.log('componentDidUpdate')
      }
      render() {
        console.log('render')
        return (
          <div>
            <div > 当前总和为{this.state.sum}</div>
            <button onClick={this.add}>+1</button>
            <button onClick={this.death}>销毁</button>
          </div>
        )
      }
    }
    ReactDOM.render(<GetInputValue />, document.getElementById('test'))

在这里插入图片描述

三、强制更新forceUpdate(即你改变state里数据强行更新)

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="test"><!--容器--></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/javascript" src="./js/prop-types.js"></script>
  <script type="text/babel">


    //不使用函数柯里化
    class GetInputValue extends React.Component {
      state = { sum: 0 }
      add=()=>{
        let sum=this.state.sum+=1
        this.setState({sum:sum})
      }
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }
      //强制更新
      uplate=()=>{
        this.forceUpdate()
      }
      shouldComponentUpdate(){ //强制更新不走这里
        console.log('shouldComponentUpdate')
        return true
      }
      componentWillUpdate(){
        console.log('componentWillUpdate')
      }
      componentDidUpdate(){
        console.log('componentDidUpdate')
      }
      render() {
        console.log('render')
        return (
          <div>
            <div > 当前总和为{this.state.sum}</div>
            <button onClick={this.add}>+1</button>
            <button onClick={this.death}>销毁</button>
            <button onClick={this.uplate}>强制更新</button>
          </div>
        )
      }
    }
    ReactDOM.render(<GetInputValue />, document.getElementById('test'))

  </script>
</body>

</html>

在这里插入图片描述

四、父子组件（父组件状态跟新钩子）

class A extends React.Component {
      state = { carName: "奔驰" }
      changeCar = () => {
        this.setState({ carName: '奥迪' })
      }
      render() {
        return (
          <div>A组件
            <button onClick={this.changeCar}>换车</button>
            <B carName={this.state.carName} /></div>
        )
      }
    }
    class B extends React.Component {
      componentWillReceiveProps() {//第一次传递不算以后才算
        console.log('子组件---conponentWillReciveProps')
      }
      shouldComponentUpdate() {
        console.log('子组件---shouldComponentUpdate')
        return true
      }
      componentWillUpdate() {
        console.log('子组件---componentWillUpdate')
      }
      componentDidUpdate() {
        console.log('子组件---componentDidUpdate')
      }
      render() {
        console.log('子组件---render')
        return (
          <div>B组件
            <div>车是{this.props.carName}</div>
          </div>
        )
      }
    }
    ReactDOM.render(<A />, document.getElementById('test'))