Question

最近我一直在尝试学习一些React编程，并且在学习渲染列表时遇到了一些困惑。

React文档描述了用于渲染列表的这种方法：

 const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );

出于好奇，我决定尝试以我的一个组件的状态保存一个React元素列表，然后直接呈现该列表。我认为它可以避免每次渲染时都将数据映射到元素。

我能够完成这项工作：

'use strict';

class List2 extends React.Component {
    constructor(props) {
        super(props);

        let nums = [];

        for(let i = 0; i < 5; i++) {
            nums.push(React.createElement('div', null, i));
        }       

        this.state = {
            numbers : nums, 
        }
    }


    render() {
        return (
            React.createElement('div', null, this.state.numbers)
        )
    }
}

但是，我试图在窗口中添加一个按钮，以将元素添加到元素列表，但按钮的onCLick函数添加的新元素无法呈现。这是无效的代码：

'use strict';

class List3 extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            nextNum : 1,
            numbers : [], 
        }

        this.buttonAction = this.buttonAction.bind(this);
    }

    buttonAction() {
        let numElement = React.createElement('h1', null, this.state.nextNum);

        let newNumber = this.state.numbers;
        newNumber.push(numElement);

        this.setState(
            { nextNum : (state.nextNum + 1),    
              numbers : newNumbers,
            }
        );
    }

    render() {
        return (
            React.createElement('div', null, 
                this.state.numbers,
                React.createElement('button', {onClick : this.buttonAction}, 'clicketh')
            )
        )
    }
}

当我单击按钮时，我看不到新的数字呈现在屏幕上。

有人可以帮我解释一下这里发生了什么吗？上面的映射方法是使用React呈现列表的唯一可靠方法吗？

Answer 1

真的不确定为什么要这么做。

但是也许您可以尝试这样的事情？

this.setState({ 
   numbers :[...this.state.numbers, numElement],
});

创建数字副本，而不是重复使用旧参考。

Answer 2

React仅渲染那些自上次渲染以来发生更改的元素。如果要强制渲染，则必须强制做出反应才能这样做，否则它将不渲染新元素。

数组是引用类型，因此如果要向其中添加或删除元素，则不会创建新副本，并且react会将其视为未更改。对于渲染问题，您每次添加元素时都需要创建一个新的“数字”副本，因此react会将其视为已更改状态并渲染为新状态。您可以通过在渲染方法中使用map函数来实现此目的，该方法将提供新的数组副本或在按钮click事件中使用“切片”，因此在设置新数字状态时，每次都会创建一个新的“数字”浅表副本

下面是两种方法的摘要。

buttonAction() {
    let numElement = React.createElement('h1', { key: this.state.nextNum }, 
    this.state.nextNum);

    let newNumbers = this.state.numbers;
    newNumbers.push(numElement);

    this.setState(
      {
        nextNum: (this.state.nextNum + 1),
        numbers: newNumbers.slice(),
      }
    );
  }

或

  render() {
    return (
      React.createElement('div', null,
        this.state.numbers.map(item=>item),
        React.createElement('button', { onClick: this.buttonAction }, 'clicketh')
      )
    )
  }

有关阵列的更多信息，请点击以下链接。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

是否可以保持状态中的反应组件列表并进行渲染？

2 个答案: