javascript - 在 React 中使用 setInterval 延迟组件渲染

Question

我有一个父组件，<App> :

constructor() {
    super();            
    this.state = {
        transporterPos: 0
    }
    this.tick = this.tick.bind(this);
}

componentDidMount() {
    this.timerId = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
    clearInterval(this.timerId);
}

tick() {
    let transporterPos = this.state.transporterPos;
    transporterPos++;
    if (transporterPos > 7) {
        transporterPos = 0;
    }
    this.setState({ transporterPos: transporterPos });
}

render() {
    return (
        <div>
            <Staves transporterPos={this.state.transporterPos}/>
        </div>
    );
}

<Staves>组件包含几个 <Stave>组件，每个组件包含多个 <Note>成分。每个<Note>组件注入(inject)了 className有条件的 active属性(property)true :

<div className="noteContainer" onClick={this.handleClick}>
    <div className={"note" + (this.props.active ? ' active' : '')}></div>
</div>

handleClick()是一种切换 <Note> 的方法的 active属性(property)。我没有在此处包含所有代码以使其更具可读性。问题是当点击 <Note> , 虽然它是 active属性立即更改，条件 className 给出的样式在 setInterval 的下一个“滴答”重新呈现组件之前，“事件”的 是不可见的方法。换句话说，渲染似乎每 1000 毫秒只发生一次。我希望它立即发生。我在使用 setInterval 吗？错了吗？

编辑:

为了回应评论，这里是handleClick方法(在 <Note> 中):

handleClick() {
    this.props.toggleActive(this.props.pos);
}

这调用了 toggleActive在<Stave> :

toggleActive(pos) {
    this.props.notes[pos].active = !this.props.notes[pos].active;
}

props.notes这是 <App> 的一部分的 state ，传递给 <Stave> (为了简洁起见，我没有包括在这个问题中)。

Answer 1

toggleActive(pos) {
    this.props.notes[pos].active = !this.props.notes[pos].active;
}

没有触发重新渲染的原因是 this.props 是直接变异的，而不是 setState。将 toggleActive 进一步移动到可以使用 setState 的位置。

如有必要，您可以将函数作为 prop 传递给子组件，并通过 this.props.toggleActive() 调用它

除了不触发重新渲染之外，this.props 不应该直接改变的另一个原因是，只要父级更改状态并将 props 传递给其子级，您的更改就会被覆盖。