Question

我来自Ember背景，该背景计算了懒惰计算的属性，然后缓存，直到依赖属性发生变化。

说我在做出反应时有以下设置：

export default React.createClass({
    getInitialState: function(){
        return {
            firstName: 'John',
            lastName: 'Smith'
        }
    },

    fullName: function(){
        console.log('full name is computed')
        return `${this.state.firstName} ${this.state.lastName}`;
    },

    changeFirstName: function(){
        this.setState({ firstName: 'somethingElse'});
    },

    changeUnrelatedState: function(){
        this.setState({ blah: 'zzzzzz' });
    },

    render: function(){
        return (
            <div>{this.state.firstName} and {this.state.lastName} makes {this.fullName()}</div>

            <button onClick={this.changeFirstName}>Change first name</button
            <button onClick={this.changeUnrelatedState}>Change some state variable</button
        );
    }
});

当我单击“更改某个状态变量”按钮时，该组件将重新渲染，fullName方法将重新计算。这是一个简单的例子，但是如果fullName方法执行了昂贵的计算呢？无论firstName或lastName是否发生变化，但仍会触发昂贵的操作，这将在状态发生变化时每次运行。

是否存在缓存方法值的反应方式，而不是在每次渲染时重新计算它？

Answer 1

通过将昂贵的计算提取到新组件中，我们可以实现shouldComponentUpdate并且只在需要时重新计算。通过这种方式，我们可以获得＆＃34;缓存＆＃34;已经计算过的值。

var FullNameComponent = React.createClass({
    shouldComponentUpdate: function (nextProps, nextState) {
        //Props was the same no need for re-rendering
        if (nextProps.firstName === this.props.firstName) return false;

        //Props has changed, recalculate!
        return true;
    },
    performExpensiveCalculation: function () {
        console.log('rerenders');
        return `${this.props.firstName} ${this.props.lastName}`;
    },
    render: function () {
        return (<div>{this.performExpensiveCalculation()}</div>);
    }
});

缓存反应组件中方法的值

1 个答案: