Question

我对使用数组时在反应中进行渲染的最佳方法有疑问。一种方法是创建函数以渲染要渲染的元素，然后调用函数进行渲染。另一种方法是仅使用array.map在render内部直接创建元素。哪种方法更好？我听说，调用函数不是最佳方法，因为它很慢，并且每次重新渲染时都会创建该元素的新实例。

你们怎么看？

export default class Calculator extends React.Component {
  renderButtons = arr => {
    let btnArr = [];
    arr.map(item => {
      btnArr.push(<button>{item}</button>);
    });
    return btnArr;
  };
  render() {
    let keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
    let operations = ["+", "-", "*", "/"];
    return (
      <div>
        {keys.map(item => {
          return <button key={item}>{item}</button>;
        })}
        <div>{this.renderButtons(operations)}</div>
      </div>
    );
  }
}

一个是键数组，我直接在这里在其上运行地图以呈现数字按钮

我对操作按钮使用了其他方法在这里我调用了一个函数进行渲染。

我也可以对数字使用相同的方式，但是只是想知道哪种方法更好。

Answer 1

我更喜欢按钮的样式，因为我不喜欢在JSX中看到JavaScript代码。

但是，您只在其中途。您的函数名称会提示您：something = Something(value)。您应该在单独的组件中使用renderButtons“渲染按钮”。我将创建两个新组件：render()和Button。 ButtonList将导入并使用Button组件，而Calculator组件将导入并使用ButtonList。

在render内部调用函数以使用数组渲染元素

1 个答案: