Есть ли лучший способ избежать повторного создания функции при рендере

Мы знаем, что рекомендуется избегать функций стрелок/связывания/создания внутри render, поскольку эти функции будут воссозданы на каждом рендере.Есть ли лучший способ избежать повторного создания функции при рендере

Учитывая следующие возможности-памяти неэффективные компонент:

const MyComponent = ({ ItemId, onSomeEvent }) => 
{ 
    return <SomeOtherComponent onSomeEvent={ val => onSomeEvent(itemId, val) } />; 
};

я бы, вероятно, перепишем это так:

const MyComponent = React.createClass({ 
    someItemId: 0, 
    onSomeEvent:() => {}, 
    someHandler(emittedValue){ 
    this.onSomeEvent(this.someItemId, emittedValue); 
    } 
    componentDidMount() { 
    const { itemId, onSomeEvent } = this.props; 
    this.someItemId = itemId; 
    this.onSomeEvent = onSomeEvent; 
    }, 
    render() { 
    <SomeOtherComponent onSomeEvent={ this.someHandler } /> 
    }; 
});

Единственная причина, я делаю это, чтобы избежать функции повторного -отложение в методе рендеринга. Что это лучший способ сделать это? То, как я это делаю, кажется слишком многословным. Мысли?

источник

2016-02-29 Jamie Dixon

Инстанцированием экземпляр функции, вероятно, намного дешевле, чем операция практически любой манипуляция DOM. У вас есть фактические данные профайлера о том, что ваш код тратит время на создание экземпляров? – Pointy

Абсолютно никаких доказательств. Это может быть оптимизация, которая просто не стоит. Это часть этого действительно, желая увидеть, действительно ли стоит компромисс в лучшей практике. Это не с моим текущим решением. –

Буквальные функции (стрелки или традиционные) литералы * кажутся такими же, как если бы они были дорогими, но если вы думаете об этом, время выполнения должно только беспокоиться о действительном * коде * функции один раз - потому что оно неизменное, это может быть разделяемых каждым экземпляром. Таким образом, новый объект функции, вероятно, довольно дешев, сопоставим с новым массивом или чем-то еще. – Pointy

Вам не нужно назначать функцию на componentDidMount. Вы можете напрямую вызвать функции реквизита.

const MyComponent = React.createClass({ 
    propTypes: { 
    itemId: React.PropTypes.number.isRequired 
    onSomeEvent: React.PropTypes.func.isRequired 
    }, 
    someHandler(emittedValue){ 
    this.props.onSomeEvent(this.props.itemId, emittedValue); 
    } 
    render() { 
    <SomeOtherComponent onSomeEvent={ this.someHandler } /> 
    }; 
});

Также не забудьте использовать гребной винт типа, ваше будущее я буду спасибо :)

источник

2016-03-05 22:04:21

Есть ли лучший способ избежать повторного создания функции при рендере

ответ

Смежные вопросы