为什么 React Component 类和函数组件没有相同的行为？

Question

我正在使用 React 17，我想知道为什么以下组件的行为不一样。当使用 React 组件类时，方法内的 props 会被更新，而使用功能组件时，它们不会更新。

使用 React.Component 类（可见 props 在 check 方法内更新）

class Clock extends React.Component {

    constructor(props) {

        super(props);

    }

    check() {

        console.log(this.props.visible);

    }

    componentDidMount() {

        this.timerID = setInterval(

            () => this.check(),

            5000

        );

    }

    componentWillUnmount() {

        clearInterval(this.timerID);

    }

    render() {

        return (

            <div />

        );

    }

}

使用带钩子的函数（检查方法内未更新可见道具）

 function Comp(props) { // contains visible attr (false by default)

    const check = () => {

        console.log(props.visible); // stays as the default value when Comp mounted

    };

    useEffect(() => {

        const timerId = setInterval(() => {

            check();

        }, 5000);

        return () => clearInterval(timerId);

    }, []);

    return <div />;

}

有人有想法吗？

Answer 1

需要将其传递到 useEffect 函数的数组中，取消注释 App 组件中的行并从 useEffect 中删除可见，您将看到状态实际上在父级中从 true 变为 false，但在子级中却没有。