React child component Re-render без изменения состояния

Question

Im передаёт некоторые данные из одного компонента в другой (от родителя к ребенку). Данные передаются без каких-либо проблем из события ввода и нажатия кнопки. Я добавил некоторые проверки, рассмотрев некоторые ключевые события (ввод чисел). Когда когда-либо срабатывает конкретная функция, связанная с этой проверкой, детальный компонент автоматически обновляется. Я не могу понять, почему. вот мой код. Я использовал флюсовую архитектуру.

основной Родитель (где KeyEvent имеет место)

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; 

компонента ребенок, где изменяется состояние происходит

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 которая триггеры re отображают PaserBox, и вы не хотите, чтобы он вызывал re render из ParserTreeBox, который является дочерним элементом PaserBox

Если это вполне нормально, то ParserTreeBox повторно отображает, поскольку функция визуализации PaserBox включает компонент ParserTreeBox.

Когда он находится в функции рендеринга PaserBox, он просто передает данные. Но вы по-прежнему можете пренебречь компонентом ParserTreeBox для рендеринга shouldComponentUpdate (nextProps, nextState) на стороне ParserTreeBox.

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

Теперь он будет проверять этот метод после того, как будет реконструирован этот компонент.

Answer 2

Изменение Component к PureComponent:

class MyComponent extends React.Component { 

    // ... 


class MyComponent extends React.PureComponent { 

    // ... 

---

Он реализует shouldComponentUpdate() как с мелкой prop и state сравнения.