子コンポーネントに反応する状態変更なしで再レンダリングする

Question

あるコンポーネントから別のコンポーネントにデータを渡しています（親から子へ）。データは、enterおよびbutton clickイベントから問題なく渡されます。いくつかの重要な事象（数字が入力されているかどうか）を考慮していくつかのバリデーションを追加しました。このバリデーションに関連する特定の機能がトリガーされると、子コンポーネントは自動的に手動でレンダリングを行います。なぜ私は理解できません。ここに私のコードです。私はフラックスのアーキテクチャを使用しています。状態が変化し

const validatebox = (textStatus) => { 

    if (textStatus.length > 100) { 
     return { 
       error: '*status is too long', 
      }; 
    } else if (textStatus === '') { 
     return { 
       error: '*status cannot be empty', 
      }; 
    } else { 
     return true; 
    } 
} 


class PaserBox extends React.Component{ 

     constructor(props) { 
      super(props); 
      this.state = { 
       textStatus: '', 
       tags:{}, 
       showResults: false 
      }; 

     } 

     parse =() => { 

     let status = this.refs.textinput.getValue(); 

     if(validatebox(status).error) { 
      this.setState({ 
      textStatus: validatebox(status).error 
      }); 
      return; 

     } 
     else { 

      Actions.SendDataToTag(status); 
      this.setState({ showResults: true }); 
      console.log(status); 


     } 
      this.clearText(); 
     }; 

     clearText =() => { 
     document.getElementById('language').value = ''; 
     }; 

     handleKey = (e) =>{ 
     if (e.key === 'Enter') { 
      this.parse(); 
     } 
     else { 
      var keycode = e.which; 
      if ((e.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) { 
      this.setState({ 
       textStatus: 'cannot enter numbers' 
      }); 
      } 
      else { 
      this.setState({ 
       textStatus: '' 
      }); 
      } 
     } 
     }; 

     handleKeyDown = (e) => { 
     if (e.keyCode == 8) { 
      this.setState({ 
       textStatus: '' 
      }); 
     } 
     }; 

     render(){ 
     return(
      <div> 
      <Paper className="row col-xs-12 col-sm-12 col-md-12" style={style} zDepth={1}> 
       <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
       <TextField 
        fullWidth={true} 
        style={textfieldstyle} 
        errorText={this.state.textStatus} 
        ref="textinput" 
        onKeyPress={this.handleKey} 
        onKeyDown={this.handleKeyDown} 
        hintText="Enter sentence ..." 
        className="col-xs-12 col-sm-12 col-md-12" 
        name="ta" 
        id="language"/> 
       </div> 
      <div className="col-xs-9 col-sm-9 col-md-9"/> 
      <div className="col-xs-3 col-sm-3 col-md-3" style={style_button}> 
       <RaisedButton secondary={true} label="Parse" onTouchTap={this.parse}/> 
      </div> 
      <div className="col-xs-1 col-sm-1 col-md-1"/> 
      </Paper> 
      <label style={styles}>Please enter sentences with correct grammar</label> 
      <br/> 
      { this.state.showResults ? <div className="row"> 
              <div className="col-md-10"> 
              <ParserTreeBox/> 
              </div> 
              <div className="col-md-2"> 
              <ParserTags/> 
              </div> 
             </div> : null } 
      </div> 
     ); 
     } 

} 

export default PaserBox; 

子コンポーネント（のKeyEventが行われる）

メイン親がレンダリング機能が状態はによって変更されていないにもかかわらず、トリガーを取得ここで

class ParserTreeBox extends React.Component{ 

    constructor(props) { 
    super(props); 
     this.state = { 
     data: [], 
     taggedData:{} 
     } 

    this._onChange = this._onChange.bind (this); 
    } 

    componentWillMount(){ 
    Store.addChangeListener(this._onChange); 
    } 

    componentWillUnmount(){ 
    Store.removeChangeListener(this._onChange); 
    } 

    _onChange(){ 
    this.setState({taggedData:Store.getData()}); 
    } 

    render(){ 
    return(
     <div> 
      <div> 
      <ParserTree data={this.state.taggedData} /> 
      </div> 
     </div> 
    ); 
    } 

} 

export default ParserTreeBox; 

起こります彼らは適切に動作しているフラックスファイルをデバッグしました。この問題

Answer 1

ここ

`レンダリング機能を取得イムは、状態が
は、子コンポーネントによって変化していないにもかかわらず、トリガーを取得なぜ任意の理由としてこれまで私はあなたがSETSTATE機能を持って理解し

ましたトリガーはPaserBoxを再描画し、PaserBoxの子であるParserTreeBoxの再レンダリングを行わないようにします。

PaserBoxのレンダリング機能にParserTreeBoxコンポーネントが含まれているため、ParserTreeBoxがレンダリングすることは非常に普通です。

PaserBoxのレンダリング機能では、データを渡すだけです。しかし、あなたはまだParserTreeBox側のshouldComponentUpdate（nextProps、nextState）関数を再描画するParserTreeBoxコンポーネントを無視することができます。

shouldComponentUpdate(nextProps, nextState){ 
return this.state.taggedData == nextState.taggedData ? false : true 
} 

このコンポーネントのレンダリングが決定されたら、このメソッドをチェックします。 PureComponentへ

Answer 2

変更Component：

class MyComponent extends React.Component { 

    // ... 


class MyComponent extends React.PureComponent { 

    // ... 

---

それは浅いpropとstate比較の両方でshouldComponentUpdate()を実装しています。