React子组件重新呈现无状态更改

Question

将一些组件的数据传递给另一组件（父到子）。数据通过输入和按钮单击事件没有任何问题。我通过考虑一些关键事件（是否输入数字）添加了一些验证。当触发与此验证相关的特定功能时，子组件会自动重新渲染。我无法弄清楚为什么。这是我的代码。我已经使用了通量架构。

主父（其中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; 

这里渲染功能得到即使的状态不会被改变触发子组件。我调试了他们正在正常工作的flux文件。任何原因，即时得到这个问题

Answer 1

`这里渲染功能被触发，即使状态是
不是由子组件改变

据我知道你有一个的setState函数触发器重新渲染PaserBox，并且您不希望它导致ParserTreeBox的重新渲染，这是PaserBox的子项

如果是这样，ParserTreeBox重新渲染是非常正常的，因为PaserBox的渲染函数包括ParserTreeBox组件。

当它在PaserBox的渲染功能时，它只是传递数据。但是你仍然可以忽略ParserTreeBox组件在ParserTreeBox端重新渲染shouldComponentUpdate（nextProps，nextState）函数。

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比较。