有没有更好的办法，以避免使

我们知道，这是一个好主意，以避免箭头功能/绑定/创建内部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

绝对没有证据。这可能是一个不值得的优化。这真的是其中的一部分，希望看看最佳实践中的交易是否真的值得。这不是我目前的解决方案。 –

井函数（箭头或传统）文字*似乎*就像他们会是昂贵的，但如果你仔细想想，运行时只需要担心该函数的实际*码*一次 - 因为它是不可变的，也可以是由每个实例共享。所以一个新的Function对象可能相当便宜，可以与新的Array或类似的东西进行比较。 – 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

有没有更好的办法，以避免使

回答

相关问题