Question

有人可以告诉我为什么以下的小React演示不能像我期望的那样工作吗？该演示打印出当前时间两次。第一个输出每秒更新一次。为什么第二次输出也没有更新??? 我需要做些什么才能让它每秒更新一次？

[编辑：代码示例仅用于演示目的 - 尽可能少的代码行 - 当然我永远不会以这种方式实现时钟。它也与“setState”与“forceUpdate”没有任何关系，“setState”在示例中会有相同的结果]

class Demo extends React.Component {
    componentDidMount() {
        setInterval(() => this.forceUpdate(), 1000);
        // TODO: componentWillUnmount -> clearInterval
    }

    render() {
       return (
            <div>
                <div><CurrentTime/></div>
                {this.props.children}
            </div>
        );
    }
}

const CurrentTime = () => new Date().toLocaleTimeString();

ReactDOM.render(
    <Demo><CurrentTime/></Demo>,
    document.getElementById('container')
);

Answer 1

因为你在demo组件中调用forceupdate所以demo组件每1000毫秒更新一次。 {this.props.children}来自父母，因此没有更新。

修改

this.props.children由父渲染函数提供，因此当您在demo组件内调用强制更新时，它不会更新从父级提供的prop。

另外通过设计React是单向数据流，子组件不能影响父级的道具。我希望现在更清楚了。

如果您还没有阅读，我建议this post。

反应问题：ForceUpdate不适用于小型演示

1 个答案: