Question

让我们采取必须呈现的一些简单的反应组件：
1）文本字段（托管一个，连接到状态）
2）任务列表（通过连接到状态的数组映射）
3）按钮，单击时从文本字段向数组添加新项

https://stackblitz.com/edit/react-glpzqn?embed=1&file=index.js

更新文本字段时（textChange event）=＆gt;然后状态更新=＆gt;强制渲染（在文本字段中的每个按键上）。

它是不受欢迎的渲染，我只想在单击按钮时渲染，将项目添加到数组中，最后在屏幕上呈现新列表。

所以我想强制渲染仅添加到列表中的项目，而不是在文本被更改时。

我可以透露的一些解决方案是：
1）将输入输入到另一个组件，因此文本更改不会影响列表呈现。
2）将输入字段更改为非托管，并在单击按钮时手动检索文本。

我猜测是否有更优雅的解决方案而不更改组件？可能是通过使用一些HOC或同样的？

Answer 1

最简单的解决方案是使用shouldComponentUpdate。不是在整个组件上，而是在与您不相关的道具发生变化时不想渲染的组件上：

class List extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.items !== this.props.items
  }

  render() {
    // will only fire when the tasks array has changed
    console.log('list rendered')
    return this.props.items.map(item => (
      <div key={item}>{item}</div>
    ))
  }
}

这只是一个浅薄的检查，您可以通过PureComponent

免费获得

class List extends PureComponent {
  render() {
    return this.props.items.map(item => (
      <div key={item}>{item}</div>
    ))
  }
}

所有在一起：

import React, { Component, PureComponent } from 'react';
import { render } from 'react-dom';

class List extends PureComponent {
  render() {
    console.log('list rendered')
    return this.props.items.map(item => (
      <div key={item}>{item}</div>
    ))
  }
}

class App extends Component {
  // do not need constructor if already using class arrows
  state = {
    input: "",
    tasks: []
  };

  addTask = () => {
    this.setState({
      tasks: [...this.state.tasks, this.state.input],
      input: ""
    });
  }

  setValue = event => {
    this.setState({
      input: event.target.value
    });
  }

  render() {
    return (
      <div>
        <List items={this.state.tasks} />
        <input onChange={this.setValue} value={this.state.input} />
        <button onClick={this.addTask}>Add</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

stackblitz solution

Answer 2

只需将onChange替换为如下所示的onBlur，下面的更改将仅在您离开输入后立即呈现。

  <input onBlur={this.setValue} />

反应部分渲染

2 个答案: