Reactjs 反应部分渲染

让我们来看一些需要渲染的简单组件：
1） 文本字段（托管字段，连接到状态）
2） 任务列表（通过连接到状态的数组映射）
3） 按钮，该按钮在单击时从文本字段向数组添加新项

当文本字段更新时（textChange事件）=>然后状态更新=>强制渲染（在文本字段中的每个按键上）

这是不需要的渲染，我只想在单击按钮时渲染，将项目添加到数组中，最后在屏幕上渲染新列表

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

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

我在猜测是否有更优雅的解决方案而不改变组件？

---

可能是通过使用一些HOC或相同的？

最简单的解决方案是使用

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

总而言之：

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

import React，{Component，PureComponent}来自'React'；
从'react dom'导入{render}；
类列表扩展了PureComponent{
render（）{
console.log（'list rendered'）
返回此.props.items.map（item=>(
{item}
))
}
}
类应用程序扩展组件{
//如果已经使用类箭头，则不需要构造函数
状态={
输入：“，
任务：[]
};
addTask=（）=>{
这是我的国家({
任务：[…this.state.tasks，this.state.input]，
输入：“”
});
}
设置值=事件=>{
这是我的国家({
输入：event.target.value
});
}
render（）{
返回(
添加
);
}
}
render（
只需将onChange替换为onBlur，如下所示，下面的更改只会在您离开输入时渲染

  <input onBlur={this.setValue} />


您实际上没有调用
forceUpdate
是吗？此外..您知道react并不是每次调用render时都重新绘制DOM..您可以以60fps的速度调用render，如果只有输入在更改，则只有输入被重新渲染，而不是页面上的所有内容。最后，简单的
应该进行ComponentUpdate
是保存一些周期所需的全部，虽然通常不必要，但我希望在文本更改为同步字段值时组件的状态更新，否则不会更改。但当文本字段状态更改时，它会在每个字母更改后调用render。我不能使用shouldComponentUpdate，因为我只希望组件更新在文本更改后发生愤怒，否则它将阻止它。你是对的，只有必要的部分被重新绘制，但和解（检查要更新的内容）无论如何都会发生，我不想。所以问题不在于重新绘制，而在于重新计算我想要阻止的更改。为什么要阻止呢？你是在制作一个高性能的动画还是什么？这是非常不成熟的优化。总之，当状态更改时，只有子级才能协调，所以你可以对树进行建模，使其只包含组件我认为你们应该发布一些代码，否则很难写出一个准确的答案。没错，一个解决方案是将输入字段带到它自己的组件中，使其具有自己的状态，这样列表就不会被呈现（也不会被重新绘制），仅在按钮单击回调时。但如果我们在一个组件中有列表和输入，可能有某种方法可以在我单击按钮之前保持列表渲染，而不将其分成两个组件？这是一个非常简单的控件：仅用于演示我的意思谢谢！全部是100%！此外，我们可以将它们都保留在一个组件中并将输入更改为非管理d、 我认为这是两种解决方案。但可能存在一些更优雅的解决方案？（不分为两个组件或将输入置于非托管状态）arrow函数使用词法
this
。你为什么要通过提供不受支持的语法使示例过于复杂而毫无意义？@WillHoskings不受谁支持？JSX已经完全不受所有浏览器的支持…在React代码中使用类arrow属性是完全常见的，甚至官方文档也建议这样做。此外，现在一切都朝着钩子的方向发展，react中的类将逐渐消失，因此本次讨论将不再进行matter@WillHoskings也许你可以简单地解释一下，要么在render中需要arrow函数，要么类方法需要在构造函数中绑定，要么类方法使用arrow func定义为属性我选择后者是因为它是最常见的一个箭头函数使用词法
这个
它正在下沉吗
  <input onBlur={this.setValue} />