在功能组件中将回调作为props传递时的react性能问题

IT技术 reactjs
2022-07-26 02:23:07

react文档

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

react文档：-

这种语法的问题是每次 LoggingButton 呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为props传递给较低的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。

这对于基于类的组件来说很好，那么功能组件呢。

我们可以像下面这样使用并遇到性能问题，因为每次渲染都会创建不同的回调吗？它说它在大多数情况下都有效，所以我不确定我们是否应该保持原样或对所有带有回调的功能组件使用 React 钩子 useCallBack。

我有 3 种差异类型

const LoggingButtion = (props)=>{
 const [ loggedStatus, setLogStatus] = useState(false);

const handleClick =()=> {
    console.log('Button Clicked');
   setLogStatus(true)
  }
 return (
      <button onClick={() => { console.log('button clicked'); setLogStatus(false)} > // Type1
      <button onClick={() => handleClick()}> // type 2
      <button onClick={handleClick}> // type 3
        Click me
      </button>
    );
}
1个回答

我们可以像下面这样使用并遇到性能问题，因为每次渲染都会创建不同的回调吗？它说它在大多数情况下都有效，所以我不确定我们是否应该保持原样或对所有带有回调的功能组件使用 React 钩子 useCallBack。

仅当应用程序足够大以至于导致性能问题时才重要，这不太可能。避免useCallback使代码更易于阅读，并且在 97% 的情况下都能正常工作。但是，如果您确实发现子组件过于频繁地重新渲染的情况，并且您有足够的这些组件可以看到性能影响，请继续使用useCallback：

const handleClick = useCallback(() => () => {
  console.log('Button Clicked');
  setLogStatus(true)
}, []);

但是，请注意，这里没有子组件，只有<button>s。虽然每次渲染都必须将不同的事件侦听器附加到每个元素，但这也不太可能成为问题。

随意做你目前正在做的事情，没有useCallback，并且只有useCallback在重新渲染被证明是一个问题时才更改为。

其它你可能感兴趣的问题
上一篇如何在 React Navigation 中创建具有可见层的堆栈导航器？ 下一篇无法从 file-saver.js 下载 pdf react