我有一个react组件：
React.createComponent({
render: function () {
return (<div className="some-component"></div>);
}
});
渲染几秒钟后，我希望它从组件中添加一个类。该类用于显示带有动画的组件。我不认为它是真正的状态变化，因为除了给组件一个动画介绍之外，它对应用程序没有任何影响，所以我讨厌通过更改 store/ 从组件外部启动它状态。
我将如何用简单的术语来做到这一点？就像是：
{setTimeout(function () {
this.addClass('show'); //pseudo code
}, 1000)}
显然我可以使用 jQuery，但这感觉是反 React 的，并且容易产生副作用。
我不认为它是真正的状态变化，因为除了给组件一个动画介绍之外，它对应用程序没有影响
对于这种情况，组件中的状态更改似乎是自然而适当的解决方案。组件状态的变化会触发重新渲染，这正是您在这里所需要的。考虑到我们在这里谈论的是您的组件的状态，而不是您的应用程序的状态。
在 React 中，您不直接处理 DOM（例如通过使用 jQuery），而是您的组件状态应该“驱动”呈现的内容，因此您让 React 对状态/props的变化“做出react”并为您更新 DOM反映当前状态：
React.createComponent({
componentDidMount () {
this.timeoutId = setTimeout(function () {
this.setState({show: true});
}.bind(this), 1000);
}
componentWillUnmount () {
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}
}
render: function () {
return (<div className={this.state.show ? 'show' : null}></div>);
}
});
setTimeout在 React 中使用时，您需要小心并确保在组件卸载时取消超时，否则如果超时仍然挂起并且您的组件被删除，您的超时回调函数将无论如何都会运行。
如果您需要执行初始安装动画或更复杂的动画，请考虑使用ReactCssTransitionGroup，它可以立即为您处理超时和其他事情：https : //facebook.github.io/react/docs/animation.html