hooks之useEffect

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

// 类写法
class App2 extends Component {
     
  constructor() {
     
    super()
    this.state = {
     
      count: 0,
      size: {
     
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }
    }
  }
  // 监听resize事件
  componentDidMount() {
     
    document.title = this.state.count
    window.addEventListener('resize', this.onResize, false)
  }
  componentDidUpdate() {
     
    document.title = this.state.count
  }
  // 卸载事件
  componentWillMount() {
     
    window.removeEventListener('resize', this.onResize, false)
  }
  onResize = () => {
     
    this.setState({
     
      size: {
     
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientWidth,
      }
    })
  }
  render() {
     
    const {
      count, size } = this.state
    return (
      <div>
        <button onClick={
     () => {
      this.setState({
      count: count + 1 }) }}>Click ({
     count})</button>
        宽{
     size.width}* 高{
     size.height}
      </div>
    )
  }
}

/** 副作用时机 
 * DidMount之后
 * DidUpdate之后
 * WillUnmount之前
 * 绑定事件,网络请求,访问dom
 * 渲染之后运行
*/

// hooks写法
function UseEffectAPI(props) {
     
  const [count, setCount] = useState(0)
  const [size, setSize] = useState({
     
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientWidth,
  })
  // 相当于DidMount和DidUpdate
  useEffect(() => {
     
    document.title = count
  })
   // 相当于DidMount和DidUpdate
  useEffect(() => {
     
    window.addEventListener('resize', onResize, false)
    // 清除事件
    return () => {
     
      window.removeEventListener('resize',onResize,false)
    }
    // 第二个参数是一个数组,只有每一项都不变情况,就不会执行,所以现在只执行一次
  },[])

  const onResize = () => {
     
    setSize(
      {
     
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientWidth,
      }
    )
  }
  return (
    <div>
      <button onClick={
     () => setCount(count + 1)}>Click ({
     count})</button>
      宽{
     size.width}* 高{
     size.height}
    </div>
  )
}


export default UseEffectAPI  

useEffect :可用来绑定事件,网络请求,访问dom渲染之后运行

解绑逻辑.2种销毁的原因:一是重新渲染,2是组件卸载

useEffect :第一个参数是回调,第二参数是数组(可选,每一项不变才会阻止useEffect执行)