React：更新子组件而不渲染父组件

React：更新子组件而不渲染父组件

您不可能想要什么。要将prop传递给子组件，父组件的状态或prop应该以某种方式更改。如您所知，这显然会触发重新渲染，因此所有子级都将重新渲染。要进行更新，

Clock

在这种情况下应重新渲染和卸载/重新安装您的组件以反映DOM更改。

如果您的应用程序不是很大，并且没有那么多的子代，则不必担心此问题，因为渲染并不那么昂贵。昂贵的一个是组件的DOM *** 作。在这里，React会扩散实际和虚拟DOM，

Label

即使重新渲染也不会卸载/重新安装组件。但是，如果您将

Label

组件编写为

PureComponent

，则不会重新渲染。但是要

Clock

像这样更新组件，是没有办法的。

class Label extends React.PureComponent {  render() {    console.log("rendered");    return (<p>{this.props.text}</p>)  }}const Clock = ({ date }) => (  <div>{date.toLocaleTimeString()}</div>)class App extends React.Component {  constructor() {    super()    this.state = {      date: new Date()    }  }  componentWillMount() {    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>    )  }}