为什么不重新渲染此子组件？

Question

我正在使用ReactJS进行实验，并且试图了解如何触发子组件渲染。 在ReactJS中，如果我设置这样的示例：

var externalCounterVar = 10
class Counter extends React.Component {
  constructor(props){
    super(props);
    this.state = props;
  }
  render() {
    console.log('rendering counter')
    return (
       <div> {externalCounterVar} </div>
    )
  }
}

class Main extends React.Component {
  constructor(props){
    super(props);
  }
  handleClick() {
    externalCounterVar += 1;
  }
  rerender(){
    this.render();
  }
  render() {
    console.log('rendering');
    return (
      <div>
        <button onClick={this.rerender.bind(this)} />
        <Counter counter={externalCounterVar} />
      </div>
    )
  }
}

ReactDOM.render(<Main />, document.getElementById('root'));

我不确定我为什么会在您“渲染”时调用Main而不是Counter的render方法？ 似乎应该同时调用这两个render方法，因为它渲染的是Main，而Counter是Main的子级。

因此，当调用rerender时，将打印“ rendering”，但不会打印“ rendering counter”。

Answer 1

看起来您正在忽略使用React的主要好处之一，即状态如何工作。

1. 您永远都不需要在React组件中调用this.render
2. 您永远不要动态设置状态，即： this.state = ...
3. 您应该始终使用this.setState设置状态。

重写后，您的代码应类似于以下内容：

const externalCounterVar = 10
class Counter extends React.Component {
  render() {
    console.log('rendering counter')
    return (
       <div> {this.props.counter} </div>
    )
  }
}

class Main extends React.Component {
  state = {
    counter: externalCounterVar
  }
  handleClick() {
    this.setState({counter: this.state.counter + 1});
  }
  render() {
    console.log('rendering');
    return (
      <div>
        <button onClick={this.handleClick.bind(this)} />
        <Counter counter={this.state.counter} />
      </div>
    )
  }
}

通过调用this.setState ，React自动知道它需要重新渲染您的组件，因此，所有子组件也将被重新渲染。

希望这可以帮助！

Answer 2

在这种情况下，您不必使用rerender方法，也可以使用setState方法重新渲染所有需要更新状态的子组件。 并且也相应地对这个你要“动起来的状态”。

这是我的例子：

 class Counter extends React.Component { render() { console.log('rendering counter'); return (<div> {this.props.counter} </div>); } } class Main extends React.Component { constructor(props){ super(props); this.state = {counter: props.counter}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({counter: ++prevState.counter})); } render() { console.log('rendering'); return ( <div> <button onClick={this.handleClick} /> <Counter counter={this.state.counter} /> </div> ); } } var externalCounterVar = 10; ReactDOM.render( <Main counter={externalCounterVar} />, document.getElementById('root') ); 

Answer 3

在某些情况下，您可以使用this.forceUpdate()调用重新渲染。 但是，如果您不能执行此操作，请不要执行。 https://facebook.github.io/react/docs/react-component.html#forceupdate