React / Redux 组件重新渲染答案

【问题标题】：React / Redux components rerenderingReact / Redux 组件重新渲染
【发布时间】：2017-03-29 05:39:10
【问题描述】：

您好，我一直在使用 React / Redux for may App。我必须动态呈现多个输入字段。我现在面临的问题是……

假设，表单已经有 2 个输入字段，我想要总共 5 个输入字段，我将在循环的帮助下简单地呈现这些，重复 5 次。问题是反应渲染了 3 个新字段，并在顶部保留了 2 个旧字段。但我需要新鲜的 5 个字段。有没有办法强制 react 先删除旧字段，然后渲染 5 个新字段。

【问题讨论】：

代码？将你的输入重构为它自己的组件，然后用循环渲染它？
React 将进行最少数量的 DOM 更改以实现您的要求。如果没有看到您的代码，很难说这是最好的方法，但我想如果您删除所有字段（降至零）然后重新构建它们，您最终应该会得到 5 个新字段。
你能展示你的代码示例吗？

标签： javascript reactjs react-native

【解决方案1】：

问题出在关键属性上。如果每次渲染都给组件新的键，那么字段将被重新创建

下面是一个小例子。我使用 Math.and() 生成唯一键。当然最好用shortid之类的

https://www.npmjs.com/browse/keyword/shortid

class InputRenderer extends Component {

  constructor() {
    super()
    this.state = {
      inputsCount: 3
    }
  }

  handleInputsCountChange = (newCount) => {
    this.setState({
      inputsCount: newCount
    })
  }

  renderInputs = () => {
    const inputs = []
    for (let i = 0; i < this.state.inputsCount; i++) {
      inputs.push(<input key={i + Math.random()} />)
    }
    return inputs
  }

  render = () =>
    <div>
      <button onClick={() => this.handleInputsCountChange(3)}>3</button>
      <button onClick={() => this.handleInputsCountChange(5)}>5</button>
      {this.renderInputs()}
    </div>
}

【讨论】：