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？它似乎应该调用两个渲染方法，因为它渲染Main和Counter是Main的子节点。

因此，当调用重新渲染时，'渲染'将打印，但'渲染计数器'不会。

Answer 1

您似乎忽视了使用React的主要好处之一，即状态如何运作。

您永远不需要在React组件中调用this.render
您永远不应动态设置状态，即：this.state = ...
您应该始终使用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重新呈现您需要更新状态的所有子组件。并且因此this你必须＆＃34;向状态移动＆＃34;。

这是我的例子：

＆＃13;

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

＆＃13;

为什么这个子组件没有重新渲染？

2 个答案: