react useEffect

useEffect

函数组件中没有生命周期，那么可以使用 useEffect 来替代。如果你熟悉 React class 的生命周期函数，你可以把
useEffect Hook 看做 componentDidMount，componentDidUpdate 和
componentWillUnmount 这三个函数的组合。

react 示例

class Example extends React.Component {
    constructor(props) {
    super(props);this.state = {
    count: 0};}componentDidMount() {
    document.title = `You clicked ${
      this.state.count} times`;}componentDidUpdate() {
    document.title = `You clicked ${
      this.state.count} times`;}render() {
    return (<div><p>You clicked {
    this.state.count} times</p><button onClick={
    () => this.setState({
     count: this.state.count + 1 })}>Click me</button></div>);}
}

Hook 示例

import React, {
     useState, useEffect } from 'react';function Example() {
    const [count, setCount] = useState(0);useEffect(() => {
    document.title = `You clicked ${
      count} times`;});return (<div><p>You clicked {
    count} times</p><button onClick={
    () => setCount(count + 1)}>Click me</button></div>);
}

你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可，如果想执行只运行一次的
effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于
props 或 state 中的任何值，所以它永远都不需要重复执行

useEffect(() => {
    document.title = `You clicked ${
      count} times`;
}, [count]); // 仅在 count 更改时更新