React 组件中的一次性操作

Question

我有一个关于 React 组件中的“一次性操作”的问题。想象一下，例如我想将某个元素滚动到某个位置，或者重置内部反应状态。

到目前为止，我一直通过使用布尔标志（例如doAction: true）和更新操作（例如setDoActionBackToFalse）的组合来做到这一点，但这似乎太复杂了。有没有人对此有任何好的解决方案？

注意：该动作在组件的生命周期内实际上可以发生多次，但每次都必须被专门触发并且只发生一次（而不是在每次重新渲染时都发生）。例如滚动到滚动窗格中的每个新添加的项目。

我创建了小小提琴以使问题更加明显：https : //jsfiddle.net/martinkadlec/et74rkLk/1/ 这使用布尔标志方法。

Answer 1

自从我问这个问题以来已经有一段时间了，从那时起我发现只要“一次性操作”实际上并不重新渲染组件，而只是修改一些浏览器状态（例如焦点、滚动位置等）人们通常倾向于通过使用类方法并使用 refs 从父组件调用它来解决这个问题。

以焦点示例为例：

class Input extends React.Component {
  inputElRef = React.createRef();
  focus = () => this.inputElRef.current.focus();
  render() {
    return (
      <input ref={this.inputElRef} />
    );
  }
}

class Parent extends React.Component {
  inputRef = React.createRef();
  render() {
    return (
      <div>
        <button onClick={() => this.inputRef.current.focus()}>Focus input</button>
        <Input ref={this.inputRef} />
      </div>
     );
  }
}