[JavaScript知识库]React Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)，可以把useEffect Hook看做 componentDidMount（） 、componentDidUpdate()、componentWillUnmount()三个函数的组合
官方文档说明：使用Effect Hook
语法说明

React.useEffect(()=>{
      //这里可以执行任何带副作用操作
      return ()=>{//在组件卸载前执行
        //在此做一些收尾工作，例如清除定时器/取消订阅等
  },[setValue]) //如果setValue为[],回调函数只会在第一次render()后执行

示例

import React, { Component } from "react";
import ReactDOM from 'react-dom'
function Demo() {
  console.log("demo");
  const [count, setCount] = React.useState(0);

  React.useEffect(()=>{
      let timer=setInterval(() => {
          setCount(count=>count+1)
      }, 1000);
      return ()=>{
          clearInterval(timer)
      }
  },[])

  //加的回调
  function add() {
    //setCount(count+1)//第一种写法
    setCount((count) => count + 1);
  }
  //卸载组件回调
  function unmount(){
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  return (
    <div>
      <h2>当前求和为：{count}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={unmount}>卸载组件</button>
    </div>
  );
 }
export default Demo;

如果是在类组件中写法如下

import React, { Component } from "react";
import ReactDOM from 'react-dom'

class Demo extends Component {
  state = { count: 0 };
  add = () => {
      this.setState(state=>({count:state.count+1}))
  }
  componentDidMount(){
      this.timer=setInterval(() => {
            this.setState(state=>({count:state.count+1}))
      }, 1000);
  }
  unmount=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  componentWillUnmount(){
      clearInterval(this.timer)
  }
  render() {
    return (
      <div>
        <h2>当前求和为{this.state.count}</h2>
        <button onClick={this.add}>点我+1</button>
        <button onClick={this.unmount}>卸载组件</button>
      </div>
    );
  }
}
export default Demo;