在功能组件中，我应该在哪里放置 console.log 来测试组件是否重新呈现？

Question

How I can check when a functional component updates and/or rerenders?

In a class component, I can use componentWillUpdate to console.log a message. Where would I place the console.log in a functional component to get the same console output?

I see two places, the function body of the component, I would put it right at the start.
And inside the jsx. Would those give me the same result?

I am asking since I can't get React.memo to work, and I am wondering if I test the wrong thing.

Answer 1

Use the effect hooks in React 16.8 offical document

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

Answer 2

So you stated you could use " componentWillUpdate to console.log a message."

Please note that the following lifecycle methods:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

are no longer encouraged. Read more