Question

我有一个Button组件，应将表单（通过道具提供）提交给服务器。在单击按钮之前，表单经常会发生变异，因此，当连接 Button到该表单时，该按钮也会重新呈现。

在执行钩子操作之前，我通过提供一个返回shouldComponentUpdate但更新false的{{1}}解决了这个问题，因此实例变量始终是最新的，即使该组件未重新渲染：

this.form

我们可以通过功能组件实现相同的功能吗？

Answer 1

如果您希望仅在道具更改时才更新组件，则应该对功能组件使用React.memo。对于类组件，最好使用从React.PureComponent开始的扩展。使用PureComponent，您无需实现shouldComponentUpdate

Answer 2

在没有演示的情况下很难确切地说出您想要做什么，但是您应该查看useEffect钩子，也就是可以传递给它的第二个值来决定何时应该（重新）运行https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

Answer 3

React备忘录（这是React的顶级API之一），可用于React Function组件，以防止在该组件的传入道具未更改时重新呈现

有关更多详细信息，请访问https://reactjs.org/docs/react-api.html#reactmemo

这是一个使用memo的示例，其中当用户在输入字段中键入内容时，Count组件不再更新。只有App组件会转售。

import React, { useState, memo } from 'react';

const App = () => {
  const [greeting, setGreeting] = useState('Hello React!');
  const [count, setCount] = useState(0);

  const handleIncrement = () =>
    setCount(currentCount => currentCount + 1);

  const handleDecrement = () =>
    setCount(currentCount => currentCount - 1);

  const handleChange = event => setGreeting(event.target.value);

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <Count count={count} />
      <button type="button" onClick={handleIncrement}>
        Increment
      </button>
      <button type="button" onClick={handleDecrement}>
        Decrement
      </button>
    </div>
  );
};

const Count = memo(({ count }) => {
  console.log('Does it (re)render?');
  return <h1>{count}</h1>;
});

export default App;

进行道具更新但不重新渲染的功能组件

3 个答案: