當狀態在響應中發生更改時，防止子組件呈現

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組件。