根据页码控制按钮状态，需选用哪些React生命周期方法

嘿，针对你这个需求，用React类组件里的 componentDidMount + componentDidUpdate 这两个生命周期方法就完全能搞定，逻辑清晰还容易维护。

为什么选这两个？ #

1. componentDidMount：负责组件第一次渲染完成后的初始化操作。毕竟组件刚加载时可能已经有初始页码（比如默认是1），这时候我们需要立刻把按钮状态设置正确，避免初始渲染时按钮状态不对的问题。
2. componentDidUpdate：每次组件状态/属性更新后触发，刚好能监听页码的变化，实时调整prevButton和nextButton的状态。

具体实现思路 #

我把逻辑抽成了一个复用的方法updateButtonStates，避免在两个生命周期里写重复代码：

class PaginationComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1, // 初始页码
      prevButton: false,
      nextButton: true
    };
  }

  // 组件首次渲染后初始化按钮状态
  componentDidMount() {
    this.updateButtonStates();
  }

  // 页码变化时更新按钮状态
  componentDidUpdate(prevProps, prevState) {
    // 只有当页码真的变化了才执行，避免不必要的计算和重渲染
    if (prevState.page !== this.state.page) {
      this.updateButtonStates();
    }
  }

  // 核心逻辑：根据当前页码计算按钮状态
  updateButtonStates() {
    const { page } = this.state;
    // 第1页时prevButton为false，其他页码为true
    const newPrevButton = page !== 1;
    // 第10页时nextButton为false，其他页码为true
    const newNextButton = page !== 10;

    // 只有当状态确实改变时才更新，防止触发无限循环
    if (newPrevButton !== this.state.prevButton || newNextButton !== this.state.nextButton) {
      this.setState({
        prevButton: newPrevButton,
        nextButton: newNextButton
      });
    }
  }

  // 页码切换的示例方法（你可以根据自己的逻辑调整）
  handlePageChange = (newPage) => {
    // 确保页码在1-10之间
    if (newPage >= 1 && newPage <= 10) {
      this.setState({ page: newPage });
    }
  }

  render() {
    return (
      <div>
        <SearchBar />
        <button 
          disabled={!this.state.prevButton} 
          onClick={() => this.handlePageChange(this.state.page - 1)}
        >
          上一页
        </button>
        <button 
          disabled={!this.state.nextButton} 
          onClick={() => this.handlePageChange(this.state.page + 1)}
        >
          下一页
        </button>
      </div>
    );
  }
}

额外说明 #

• 为什么要加状态变化的判断？因为setState会触发组件更新，如果在componentDidUpdate里无条件调用setState，会导致无限循环，所以必须确认新状态和当前状态不同时才更新。
• 如果你的组件是函数式组件（用hooks），那对应的方案就是useEffect钩子，依赖数组里放page，效果和上面的生命周期组合是一样的：

  useEffect(() => {
    const newPrevButton = page !== 1;
    const newNextButton = page !== 10;
    setPrevButton(newPrevButton);
    setNextButton(newNextButton);
  }, [page]);
  

内容的提问来源于stack exchange，提问作者MountainConqueror