Я читал несколько статей, которые рекомендовали не использовать функции стрелок в атрибутах JSX, таких как onClick, onMouseMove и c.
https://reactjs.org/docs/faq-functions.html#is -it-ok-to-use-arrow- functions-in-render-method
Но когда речь заходит о влиянии на производительность при использовании функции стрелки в JSX. Есть ли разница в приведенных ниже методах, используемых для визуализации x & y & z. Какой подход был бы рекомендован в целом?
Пример: https://codesandbox.io/s/different-ways-to-create-react-components-sm517
const x = [1, 2, 3, 4, 5];
const y = [6, 7, 8, 9, 10];
const z = [11, 12, 13, 14, 15];
class MyComponent2 extends React.Component {
showY = () => {
return y.map(val => {
return <p>{val}</p>;
});
};
render() {
const zValues = z.map(val => {
return <p>{val}</p>;
});
return (
<div>
<div>
<p>React Component Using a Class</p>
{x.map(val => {
return <p>{val}</p>;
})}
</div>
<div>{this.showY()}</div>
<div>{zValues}</div>
</div>
);
}
}