react Hooks ：useEffect的使用

什么是副作用？

在特定的状态、节点、时机下，要做特定的行为，这些行为置身于组件渲染之后，通通称之为副作用，绑定事件，网络请求，访问DOM元素，通通称之为副作用，副作用时机在Mount之后，Update之后，Unmount之前，这三者分别是ComponentDidMount,componentDidUpdate,componentWillUnmount

useEffect怎么用？

useEffect在render之后调用，也可以通过自定义状态来决定调用和不调用，第一次调用相当于ComponentDidMount，之后调用相当于componentDidUpdate，useEffect的调用不仅仅代表一个函数的执行，还可以返回另一个回调函数，是清除上一次副作用遗留下来的状态，会在下一次渲染之前执行

react类组件 实现副作用

import React, { Component } from 'react'

class App extends Component {
  state = {
    count: 0,
    size: {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    }
  }
  onResize = () => {
    this.setState({
      size: {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }
    })
  }
  componentDidMount() {
    document.title = this.state.count;
    window.addEventListener('resize', this.onResize, false);//监听resize事件绑定到onResize方法上
  }
  componentDidUpdate() {
    document.title = this.state.count
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize, false);//解绑该resize事件
  }
  render() {
    const { count, size } = this.state
    return (
      <div>
        <button
          type="button"
          onClick={() => this.setState({ count: count + 1 })}
        >
          Click({count})
          size:{size.width} | {size.height}
        </button>
      </div>
    )
  }
}


export default App



           

react函数组件 实现副作用

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

function APP(props) {

  const [count, setCount] = useState(0)
  const [size, setSize] = useState(
    {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    }
  )
  const onResize = () => {
    setSize(
      {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }
    )
  }

  useEffect(() => {
    document.title = count;
  })

  useEffect(() => {
    window.addEventListener('resize', onResize, false);//监听resize事件绑定到onResize方法上
    return () => {
      window.removeEventListener('resize', onResize, false);//解绑该resize事件
    };
    //return出一个回调函数。回调函数在视图销毁之前,两种销毁原因，一是重渲染，二是组件卸载
  }, [])
  //useEffect第二个必须是一个数组，只有数组每一项都不变时候再能阻止Effect执行
  //当useEffect第二个参数为空数组，Effect调用一次后就不再调用,回调函数也只有在组件卸载时候调用
  return (
    <div>
      <button
        type="button"
        onClick={() => { setCount(count + 1) }}
      >
        Click({count})
        size:{size.width} | {size.height}
      </button>
    </div>
  )
}

export default APP