下面是一个简单的示例:
const { Component } = React
const { render } = ReactDOM
const Label = ({ text }) => (
<p>{text}</p>
)
const Clock = ({ date }) => (
<div>{date.toLocaleTimeString()}</div>
)
class App extends Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
componentDidMount() {
this.interval = setInterval(
() => this.setState({ date: new Date() }),
1000
)
}
componentWillUnmount() {
clearInterval(this.interval)
}
updateTime() {
}
render() {
return (
<div>
<Label text="The current time is:" />
<Clock date={this.state.date} />
</div>
)
}
}
render(<App />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
this.setState({ date: new Date() })
每秒钟被调用一次,更新当前时间到时钟。根据我的了解,setState
会调用App组件的渲染方法,导致整个组件(包括Label)重新渲染。
是否有一种方法可以将日期传递给时钟(使其重新呈现),而不必重新呈现整个应用程序组件?这对性能有多大影响?
shouldComponentUpdate
。 - Isaac