javascript - 为什么 React 会以不变的状态一遍又一遍地渲染我的组件？

Question

我正在制作一个简单的滚动到顶部的组件，我认为 React 只会在其中的某些内容发生变化时重新呈现组件。因为我在我的渲染中有一个条件绑定(bind)到状态，React 不应该只在状态改变时渲染它吗？相反，我看到它随着每个小滚动重新呈现。

此外，如果我保持原样，重新渲染这么多有什么缺点吗？

import React from 'react';
import './scroll-to-top.css';

export default class extends React.Component {

  state = {
    shouldShowButton: false
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    this.setState({
    shouldShowButton: window.scrollY > 250 ? true : false
  });
 }

  render () {
    {console.log("i have rendered!")}
    return (
      this.state.shouldShowButton ? <a className="scroll-to-top" href="#">Return to Top</a> : null
    );
  };
};

Answer 1

欢迎来到 Stack Overflow :)

让我们仔细考虑您的代码。

当组件加载时，您将监听器附加到滚动事件:

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

这会在用户滚动时触发 handleScroll。 handleScroll 设置组件的状态，无论三元条件是否解析为 true 或 false:

handleScroll = () => {
  this.setState({
    shouldShowButton: window.scrollY > 250 ? true : false
  });
}

每当我们使用 setState 时，React 都会触发 render。因此，render 会随着每次小滚动而触发。

缺点 - 您应该非常小心地将任何东西附加到scroll，因为它会影响性能。如果你真的、真的需要这样做，你可以考虑去抖事件。 (去抖动是一种限制函数调用次数的技术。)