Reactjs 功能组件进行道具更新，但不'；重新渲染

我有一个

按钮

组件，它应该向服务器提交表单（通过道具提供）。在单击按钮之前，表单经常会发生变化，因此当将

按钮连接到表单时，按钮也会经常重新呈现

在hooks之前，我通过提供一个
shouldComponentUpdate
来解决这个问题，该函数返回
false
，但更新
this.form
，这样即使组件没有重新呈现，实例变量也始终是最新的：

class ButtonContainer extends React.Component {

  form = null;

  shouldComponentUpdate(nextProps, nextState) {
    // prevent re-render but update variable
    this.form = nextProps.form;
    return false
  }

  submitForm = () => {
    console.log(this.form);
    // ...
  }

  render() {
    return <button onClick={this.submitForm}>Submit</button>
  }
}

class按钮容器扩展了React.Component{
form=null；
shouldComponentUpdate（下一步，下一步状态）{
//防止重新渲染但更新变量
this.form=nextrops.form；
返回错误
}
submitForm=（）=>{
console.log（this.form）；
// ...
}
render（）{
返回提交
}
}

功能组件是否也能达到同样的效果？
如果您希望组件仅在道具更改时更新，则应使用功能组件。对于类组件，最好使用扩展自。使用
PureComponent
时，您不需要实现
shouldComponentUpdate
如果您希望只在道具更改时更新组件，则应将其用于功能组件。对于类组件，最好使用扩展自。使用
PureComponent
您不需要实现
shouldComponentUpdate
如果没有演示，很难准确地说出您想要做什么，但是您应该查看
useffect
钩子，也就是您可以传递给它的第二个值，以决定何时应该（重新）执行运行
在没有演示的情况下，很难准确地说出您想要做什么，但是您应该查看
useffect
挂钩，即您可以传递给它的第二个值，以决定它应该何时（重新）执行run
React memo–React的顶级API之一–可用于React功能组件，以防止在该组件的传入道具未更改时重新播放

欲了解更多详情，请访问此处

下面是一个使用
memo
的示例，其中当用户在输入字段中键入内容时，计数组件不再更新。只有应用程序组件重新加载

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;


import React，{useState，memo}来自“React”；
常量应用=（）=>{
const[greeting，setGreeting]=useState（'Hello React！'）；
const[count，setCount]=useState（0）；
常量handleIncrement=（）=>
setCount（currentCount=>currentCount+1）；
const handleDecrement=（）=>
setCount（currentCount=>currentCount-1）；
const handleChange=event=>setGreeting（event.target.value）；
返回(
增量
减量
);
};
常量计数=备注（{Count}）=>{
log（'它（重新）呈现了吗？'）；
返回{count}；
});
导出默认应用程序；
React memo–React的顶级API之一–可用于React功能组件，以防止在该组件的传入道具未更改时重新加载

欲了解更多详情，请访问此处

下面是一个使用
memo
的示例，其中当用户在输入字段中键入内容时，计数组件不再更新。只有应用程序组件重新加载

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;


import React，{useState，memo}来自“React”；
常量应用=（）=>{
const[greeting，setGreeting]=useState（'Hello React！'）；
const[count，setCount]=useState（0）；
常量handleIncrement=（）=>
setCount（currentCount=>currentCount+1）；
const handleDecrement=（）=>
setCount（currentCount=>currentCount-1）；
const handleChange=event=>setGreeting（event.target.value）；
返回(
增量
减量
);
};
常量计数=备注（{Count}）=>{
log（'它（重新）呈现了吗？'）；
返回{count}；
});
导出默认应用程序；
react hook常见问题解答中有一节介绍这一点。非常感谢。我在上面添加了一个示例。react hook常见问题解答中有一节介绍了这一点。非常感谢。我在上面加了一个例子，谢谢。我在上面添加了一个例子。我现在明白了，请看下面的
备忘录
答案，它们更好。不，我不这么认为
memo
不会有帮助，因为它每次都会重新呈现组件，因为
表单
道具正在更改。谢谢。我在上面添加了一个例子。我现在明白了，请看下面的
备忘录
答案，它们更好。不，我不这么认为
memo
不会有帮助，因为它每次都会重新呈现组件，因为
表单
道具正在更改。谢谢。我想我对我的问题解释得很糟糕，所以我编辑了我的问题。谢谢。我想我对我的问题解释得很糟糕，所以我对我的问题进行了编辑。为什么需要在ButtonContainer中包含所有表单数据？您可以只传递回调而不在ButtonContainer中传递过多的数据，并在父组件中处理它。为什么您需要ButtonContainer中的所有表单数据？您可以在ButtonContainer中传递回调，而不需要过多的数据，并在父组件中处理它