Question

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

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Code pen Link

Answer 1

您可以使用function divClicked(id) { console.log("click"); var divHtml = $(this).html(); var editableText = $("<textarea />"); editableText.val(divHtml); $(this).replaceWith(editableText); editableText.focus(); // setup the blur event for this new textarea var iden = $(this).attr("id"); editableText.blur(id, editableTextBlurred); } function editableTextBlurred(id) { console.log("blur"); var html = $(this).val(); var viewableText = $("<div>"); viewableText.html(html); $(this).replaceWith(viewableText); var descr = viewableText.html(); // setup the click event for this new div cool_function(id, descr); $(viewableText).click(id, divClicked); }，而不是展开React.Component。两者之间的区别在于后者还对每个渲染之间的React.PureComponent和props执行浅比较;如果没有任何变化，它就不会更新。

这也推荐在official documentation：

如果您的React组件的state函数在给定相同的道具和状态的情况下呈现相同的结果，则在某些情况下可以使用render()来提升性能。

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

＆＃13;

React.PureComponent

＆＃13;

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'));

＆＃13;

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

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>;
  }
}

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

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

2 个答案: