Question

提供一个setState函数作为onClick-property直接是一件坏事，导致该函数将再次定义每次渲染？它应该被声明为函数，e。 G。 this.open？

render() {
    return (
        <div>
            <button
                type="button"
                onClick={() => this.setState({ isOpen: !this.state.isOpen })}
            />
        </div>
    );
}

Answer 1

因为每次渲染都会定义函数吗？

是的，顺便说一句，无论您是使用块体还是简洁的 arrow function ，每次创建新函数时都无关紧要。你应该尽量避免在JSX中使用arrow function。

如果在构造函数中绑定方法，那么它将只创建一次，并且对于每次重新渲染，将使用相同的引用。

Block Body:  () => {....}

Concise Body: () => expression

是否应将其声明为函数？

如 Doc ：

中所述

在大多数情况下它很好，但我们通常建议在构造函数中使用绑定或使用类字段语法，以避免出现这种性能问题。

像这样写：

handleClick(){
   this.setState(prevState => ({ isOpen: !prevState.isOpen }))
}

onClick={this.handleClick}

我们应该避免JSX中的箭头函数：ReactJS

1 个答案: