Reactjs 反应问题：ForceUpdate不适用于tiny demo中的儿童

有谁能告诉我为什么下面的小程序不能像我预期的那样工作？ 演示将当前时间打印两次。 第一个输出每秒更新一次。 为什么第二次输出也没有更新？？？ 我必须做什么才能使它每秒更新

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

类演示扩展了React.Component{
componentDidMount（）{
setInterval（（）=>this.forceUpdate（），1000）；
//TODO:componentWillUnmount->clearInterval
}
render（）{
返回(
{this.props.children}
);
}
}
const CurrentTime=（）=>new Date（）.toLocaleTimeString（）；
ReactDOM.render(
,
document.getElementById（'容器'）
);

因为您在演示组件内部调用forceupdate，所以演示组件每1000毫秒更新一次<代码>{this.props.children}来自父级，因此它没有得到更新

编辑

this.props.children

是由父渲染函数提供的，因此当您在

demo

组件中调用强制更新时，它不会更新父渲染函数提供的prop

此外，React是单向数据流，子组件不会影响父组件的道具。我希望现在更清楚了

---

如果您还没有阅读，我建议您使用。

因为您正在演示组件内部调用forceupdate，所以演示组件每1000毫秒更新一次<代码>{this.props.children}来自父级，因此它没有得到更新

编辑

this.props.children

是由父渲染函数提供的，因此当您在

demo

组件中调用强制更新时，它不会更新父渲染函数提供的prop

此外，React是单向数据流，子组件不会影响父组件的道具。我希望现在更清楚了

---

如果你还没有阅读过，我建议你不要使用

forceUpdate（）

，除非你有经验。如果你是，这通常是你的反应思维不正确的迹象。在这种情况下，您应该将“当前时间”存储在状态中，并且有一个间隔，该间隔每秒调用

setState（）

，并更新

状态中的值。当您在渲染方法中将CurrentTime作为子级传递时，为什么要在演示组件中插入CurrentTime？如果没有其他人回答，我可以发布一些代码，说明如何真正做到这一点。我建议您认真阅读React生命周期，了解其工作顺序。我从来没有在一些生产应用程序中使用过forceUpdate。请注意：这只是一个简短的演示，展示了更新问题。这不是关于实现时钟，不是关于如何正确处理状态，不是关于如何正确处理副作用，不是关于forceUpdate vs setState…非常感谢Jayce444和Daniel Zuzevich提供的信息。我想我现在知道该怎么做了。除非你有经验，否则你几乎不应该使用

forceUpdate（）

。如果你是，这通常是你的反应思维不正确的迹象。在这种情况下，您应该将“当前时间”存储在状态中，并且有一个间隔，该间隔每秒调用

setState（）

，并更新

状态中的值。当您在渲染方法中将CurrentTime作为子级传递时，为什么要在演示组件中插入CurrentTime？如果没有其他人回答，我可以发布一些代码，说明如何真正做到这一点。我建议您认真阅读React生命周期，了解其工作顺序。我从来没有在一些生产应用程序中使用过forceUpdate。请注意：这只是一个简短的演示，展示了更新问题。这不是关于实现时钟，不是关于如何正确处理状态，不是关于如何正确处理副作用，不是关于forceUpdate vs setState…非常感谢Jayce444和Daniel Zuzevich提供的信息。我想我现在知道该怎么办了。

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')
);