深入理解 useEffect

Question

class Example extends Component {
  constructor (props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  render() { 
    return (
      <div>
        <p>点击{this.state.count}次</p>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          点击
        </button>
      </div>
    );
  }
}

类组件和函数组件

function Example () {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>点击{count}次</p>
      <button onClick={() => setCount(count + 1)}>
        点击
      </button>
    </div>
  )
}

生命周期上的功能转移到 useEffect 里面实现

class Example extends Component {
  constructor (props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    document.title = `点击${this.state.count}次`
  }
  componentDidUpdate(prevProps, prevState) {
    document.title = `点击${this.state.count}次`
  }
  render() { 
    return (
      <div>
        <p>点击{this.state.count}次</p>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          点击
        </button>
      </div>
    );
  }
}

function Example () {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `点击${count}次`
  })
  return (
    <div>
      <p>点击{count}次</p>
      <button onClick={() => setCount(count + 1)}>
        点击
      </button>
    </div>
  )
}

1. 在 class 组件中，我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决
2. 你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可

class Example extends Component {
  constructor (props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    document.title = `点击${this.state.count}次`
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      document.title = `点击${this.state.count}次`
    }
  }
  render() { 
    return (
      <div>
        <p>点击{this.state.count}次</p>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          点击
        </button>
      </div>
    );
  }
}

function Example () {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `点击${count}次`
  }, [count])
  return (
    <div>
      <p>点击{count}次</p>
      <button onClick={() => setCount(count + 1)}>
        点击
      </button>
    </div>
  )
}

传入 [] 作为第二个参数更接近大家更熟悉的 componentDidMount 和 componentWillUnmount 思维模式

组件加载启动一个定时器，组件销毁清除定时器

function Example () {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(1)
    }, 1000)
    return () => clearInterval(timer)
  }, [])
  return (
    <div>
      <p>点击{count}次</p>
      <button onClick={() => setCount(count + 1)}>
        点击
      </button>
    </div>
  )
}