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

Question

我有一个关于在使用数组时在 React 中进行渲染的最佳方式的问题。一种方法是创建渲染要渲染的元素的函数，然后调用这些函数来进行渲染。另一种方法是只使用 array.map 直接在渲染中创建元素。哪种方式更好？我听说调用函数不是最好的方法，因为它很慢，而且每次重新渲染时都会创建一个新的元素实例。

大家怎么看？

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 代码。

然而，您只完成了一半。你的函数名给了你一个提示：renderButtons。您应该 "render the buttons" 在单独的组件中使用 render()。我将创建两个新组件：Button 和 ButtonList。 ButtonList 将导入并使用 Button 组件，而您的 Calculator 组件将导入并使用 ButtonList。

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

calling function inside render to render elements using array

arrays

render

reactjs