通過具有功能組件的道具，而無需在組件內聲明功能

Question

我遍歷項目列表，並想調用onClick（）函數。 下面的例子：

class App extends Component {
    state = { items: [1, 2, 3, 4] };

    click = i => console.log(i);

    render() {
        return (
            <div>
                {this.state.items.map(item => (
                    <div 
                        key={item} 
                        // this works fine, but I rather not declare functions within the render function / JSX
                        onClick={() => this.click(item)}
                    >
                        {`click on # ${item}`}
                    </div>
                ))}
            </div>
        )
    }
}

如您所見，我在JSX中聲明了一個函數。 我一遍又一遍地執行此操作，但是不久前，我了解到出於性能原因，您應該避免在組件JSX本身中聲明一個函數。

功能部件也是如此嗎？ 如果是這樣，還有其他方法可以將動態信息（在本例中為項目）傳遞給回調嗎？

注意：我期待在某個時候使用鈎子，但是現在我只想知道一種最佳實踐而不使用它們。

注意二：話雖如此，如果您確定這是一個相關問題，並且由於鈎子而無法解決，那我顯然想了解一下:)

Answer 1

功能部件也是如此嗎？

好吧，實際上您的代碼中沒有使用任何功能組件。 無論是函數，變量聲明還是調用，在經常調用的函數render()例如render()所做的所有操作都會導致性能下降。 減少問題是另一回事。

如果是這樣，還有其他方法可以將動態信息（在本例中為項目）傳遞給回調嗎？

你可以.bind(...)它：

 onClick = {console.log.bind(console, item) }

但實際上，您是否注意到重新提交有任何延遲？ 可能不是，如果不是，那不是由函數聲明引起的。 寫出看起來很美的代碼，不要為編譯器進行優化，而讓編譯器來做。

但是前段時間我了解到您應該避免在組件JSX本身中聲明一個函數

您不應該真正避免使用它，而是盡可能使用其他方法。 在這種情況下，並沒有更好的方法。

Answer 2

您可以聲明另一個這樣的方法。 不要忘記使用.bind 。 否則，該方法將無法正確調用。

class App extends Component {
    state = { items: [1, 2, 3, 4] };

    handleClick(item) {
        // do something
        console.log(item);
    }
    render() {
        return (
            <div>
                {this.state.items.map(item => (
                    <div 
                        key={item} 
                        // this works fine, but I rather not declare functions within the render function / JSX
                        onClick={this.handleClick.bind(this, item)}
                    >
                        {`click on # ${item}`}
                    </div>
                ))}
            </div>
        )
    }
}

Answer 3

您可以創建一個父組件，該父組件將負責遍歷所有項目，並將點擊處理程序作為道具傳遞給每個子組件。

然后，在子組件內部，您可以輕松地將處理程序引用為this.props.onClick

函數（對象）在JavaScript中通過引用傳遞。 通過在父作用域中聲明它，只會在那兒占用空間。 如果在子級中初始化，它將為每個子級組件的函數在內存中創建空間。

class Parent extends Component {
    state = { items: [1, 2, 3, 4] };

    parentClick(item) {
        // do something
        console.log(item);
    }
    render() {
        return (
            <div>
                {this.state.items.map(item => (
                  <Child item={item} onClick={this.parentClick}>
                ))}
            </div>
        )
    }
}



class Child extends Component {

    childClick(item) {
        this.props.onClick(item)
    }

    render() {
        return (
            <div>
                <p onClick={this.childClick(this.props.item)}>this.props.item</p>
            </div>
        )
    }
}