Question

我知道React会对this.state进行区分。但是当你在子组件中时，差异是在this.props上完成的。所以我想知道如果prop的值是函数，则diffing系统如何区别？如果我将一个函数放入this.props或this.state中，这是不好的做法（对于perf或者其他东西不好）吗？

Answer 1

如果传递给子组件函数，则props diff算法将不断触发。如果您关心这种情况，可以实现shouldComponentUpdate，您可以忽略包含函数的属性。

您可以试用this example

Answer 2

将未绑定的函数传递给子组件，并让子组件使用实例方法，例如：

class Container extends Component {

    deleteItem(index) {
        actionThatDeletesSomething(index);
    }

    render(){
        return(
            <ChildComponent deleteItem={ this.deleteItem } />
        )
    }
}


class ChildComponent extends Component {

    render(){
        return(
            <a onClick={ this.props.deleteItem(index) } />
        )
    }
}

传递道具功能的好习惯？

2 个答案: