React useEffect使用

第一

export default function App() {

  const [name,setname] = useState('huhu')

  useEffect(()=>{

    setname(name.substring(0,1).toUpperCase()+name.substring(1))

  },[name])

  //[name,age]//可以有多个参数

  //带参数，第一次默认执行一次，第二次name更新也会执行

  return (

    <div>

      app={name}

      <button onClick={()=>{

        setname('xiaoming')

      }}>

        click

      </button>

    </div>

  )

}

第二

import React, { Component, useEffect } from 'react'

export default class App extends Component {

  state = {

    isCreate : true

  }

  render() {

    return (

      <div>

        <button onClick={()=>{

          this.setState({

            isCreate:!this.state.isCreate

          })

        }}>点击</button>

        {/* { this.state.isCreate?<Child />:'' } */}

        { this.state.isCreate && <Child /> }

      </div>

    )

  }

}

function Child(props){

  useEffect(()=>{

    window.onresize = ()=>{

      console.log('resize')

    }

    var timer = setInterval(() => {

      console.log(1234)

    }, 1000);

// 点击之后只执行一次

    return()=>{

      console.log('组件销毁')

      window.onresize = null;

      clearInterval(timer)

    }

  },[])

  return <div>

    child

  </div>

}