当状态在响应中发生更改时，防止子组件呈现

Question

我有一个反应的父母和孩子组成部分。 在这里我将id作为从父到子的道具传递，我保存使用状态输入的textarea的值。 每当我在textarea中输入时。 子组件得到更新。 如何防止子组件更新textarea中输入的每个值？ 请帮我。

 class Child extends React.Component { constructor() { super(); } componentWillMount(){ console.log('child component Will '+this.props.id); } componentDidMount(){ console.log('child component Did '+this.props.id); } render() { console.log('child render '+this.props.id); return <p>Child {this.props.id}</p>; } } class Application extends React.Component { constructor(){ super(); this.state={ id:1, textValue:undefined } } componentWillMount(){ console.log('parent component Will'); } componentDidMount(){ console.log('parent component Did'); } render() { console.log('parent render'); return <div> <textarea onChange={(event)=>{ this.setState( {textValue:(event.target.value)}) } }></textarea> <Child id='1'/> <Child id='2'/> </div>; } } ReactDOM.render(<Application />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script> <div id="app"></div> 

代码笔链接

Answer 1

相反，延长React.Component可以使用React.PureComponent 。 两者之间的区别在于后者还对每个渲染之间的props和state进行浅比较; 如果没有任何改变，它不会更新。

这也是官方文档中的建议：

如果React组件的render()函数在给定相同的props和state的情况下呈现相同的结果，则在某些情况下可以使用React.PureComponent来提高性能。

---

看看下面的代码。 我只更改了第一行代码来扩展正确的类。

 class Child extends React.PureComponent { constructor() { super(); } componentWillMount(){ console.log('child component Will '+this.props.id); } componentDidMount(){ console.log('child component Did '+this.props.id); } render() { console.log('child render '+this.props.id); return <p>Child {this.props.id}</p>; } } class Application extends React.Component { constructor(){ super(); this.state={ id:1, textValue:undefined } } componentWillMount(){ console.log('parent component Will'); } componentDidMount(){ console.log('parent component Did'); } render() { console.log('parent render'); return <div> <textarea onChange={(event)=>{ this.setState( {textValue:(event.target.value)}) } }></textarea> <Child id='1'/> <Child id='2'/> </div>; } } ReactDOM.render(<Application />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script> <div id="app"></div> 

编辑：我更新了您的问题，并使您的代码在代码段中可运行，以便可以将其与我的代码段进行比较。

Answer 2

您可以使用shouldComponentUpdate控制组件何时应该呈现

您的子组件看起来像这样：

class Child extends React.Component {
  componentWillMount(){
    console.log('child component Will '+this.props.id);
  }
  componentDidMount(){
    console.log('child component Did '+this.props.id);
  }
  shouldComponentUpdate(nextProps, nextState){
    if (nextProps.id !== this.props.id) {
      return true;
    }
    return false;
  }

  render() {
    console.log('child render '+this.props.id);
    return <p>Child {this.props.id}</p>;
  }
}

在此示例中，仅当其组件的ID更改时，才会更新Child组件。