Javascript React子组件在不更改状态的情况下重新渲染

我正在将一些数据从一个组件传递到另一个组件（父组件到子组件）。通过enter和button click事件传递数据时不会出现任何问题。通过考虑一些关键事件（是否输入数字），我添加了一些验证。当触发与此验证相关的特定函数时，子组件会自动重新渲染。我不明白为什么。这是我的密码。我使用了flux架构

主父级（发生keyevent的位置）

const validatebox=（textStatus）=>{
如果（textStatus.length>100）{
返回{
错误：“*状态太长”，
};
}else if（textStatus==''）{
返回{
错误：“*状态不能为空”，
};
}否则{
返回true；
}
}
类PaserBox扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
textStatus:“”，
标记：{}，
显示结果：错误
};
}
解析=（）=>{
让status=this.refs.textinput.getValue（）；
如果（validatebox（status）.error）{
这是我的国家({
textStatus:validatebox（状态）。错误
});
返回；
}
否则{
动作。发送数据到标签（状态）；
this.setState（{showResults:true}）；
控制台日志（状态）；
}
这个.clearText（）；
};
明文=（）=>{
document.getElementById（'language'）。value=''；
};
handleKey=（e）=>{
如果（e.key=='Enter'）{
this.parse（）；
} 
否则{
var-keycode=e.which；
如果（（e.shiftKey==false&&（keycode==46 | | keycode==8 | | keycode==37 | | keycode==39 |&（keycode>=48&&keycode{
如果（e.keyCode==8）{
这是我的国家({
文本状态：“”
});
}
};
render（）{
返回(
请输入语法正确的句子


{this.state.showResults？
：null}
);
}
}
导出默认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;

类ParserTreeBox扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
taggedData:{}
}
this.\u onChange=this.\u onChange.bind（this）；
}
组件willmount（）{
Store.addChangeListener（this.\u onChange）；
}
组件将卸载（）{
Store.removeChangeListener（this.\u onChange）；
}
_onChange（）{
this.setState（{taggedData:Store.getData（）}）；
}
render（）{
返回(
);
}
}
导出默认ParserTreeBox；

在这里，即使子组件没有更改状态，渲染函数也会被触发。我调试了通量文件，它们工作正常。我为什么会遇到这个问题

`在这里，即使状态为
未被子组件更改

据我所知，您有一个setState函数，它会触发重新呈现PaserBox，您不希望它导致重新呈现PaserBox的子项ParserTreeBox

如果是这样，则ParserTreeBox重新渲染是很正常的，因为PaserBox的渲染函数包含ParserTreeBox组件

当它在PaserBox的render函数中时，它只是传递数据。但您仍然可以忽略ParserTreeBox组件在ParserTreeBox端重新呈现shouldComponentUpdate（nextProps，nextState）函数

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

现在，它将在确定该组件的渲染后检查此方法

`在这里，即使状态为
未被子组件更改

据我所知，您有一个setState函数，它会触发重新呈现PaserBox，您不希望它导致重新呈现PaserBox的子项ParserTreeBox

如果是这样，则ParserTreeBox重新渲染是很正常的，因为PaserBox的渲染函数包含ParserTreeBox组件

当它在PaserBox的render函数中时，它只是传递数据。但您仍然可以忽略ParserTreeBox组件在ParserTreeBox端重新呈现shouldComponentUpdate（nextProps，nextState）函数

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

---

现在，在决定此组件的渲染后，它将检查此方法。

将

组件更改为
PureComponent
：

类MyComponent扩展了React.Component{
// ...
类MyComponent扩展了React.PureComponent{
// ...

---

---

它通过浅层的

属性

和

状态

比较来实现

shouldComponentUpdate（）

。

将

组件

更改为

纯组件

：

类MyComponent扩展了React.Component{ // ... 类MyComponent扩展了React.PureComponent{ // ...

---

---

它实现了

shouldComponentUpdate（）

同时使用浅层的

道具
和
状态
比较。
我现在尝试了这个方法，子组件需要单击两次按钮才能呈现正确的数据。您可以查看我面临的问题。提交表单一次后，在文本字段中按下一个键时，它将重新呈现。我现在尝试了这个方法，即ild组件需要单击两次按钮才能呈现正确的数据。您可以查看im面临的问题。提交后