爲什麼這個子組件不會重新提交？

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的子項。

所以當rerender被調用時，'渲染'將會打印，但'渲染計數器'不會。

Answer 1

看起來你忽略了使用React的一個主要好處，即狀態如何工作。

1. 你永遠，永遠需要一個陣營組件
2. 你不應該設置狀態動態中調用this.render，即：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，陣營自動知道它需要重新呈現您的組件，並作爲一個結果，所有的子組件也將被重新描繪。

希望這會有所幫助！

Answer 2

在這種情況下，您不必使用rerender方法，目的還在於用方法setState重新呈現您需要更新狀態的所有子組件。而且相應地this你必須「移動狀態」。

這裏我舉的例子：

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