Question

只是从ReactJS开始，我对语法感到困惑。下面的代码有效，但是我不确定为什么。这将产生一个函数，该函数告诉您是否已登录，然后单击该按钮后即可登录或注销（更改状态）。

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            isLoggedIn: false
        }
        this.handleClick = this.handleClick.bind(this)
    }

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

    render() {    
        return (
            <div>
                {this.state.isLoggedIn ? <h1>You are now logged in.</h1> : <h1>You are now logged out.</h1>}
                <button onClick={this.handleClick}>{this.state.isLoggedIn ? <h3>LOG OUT</h3> : <h3>LOG IN</h3>}</button>
            </div>
        )
    }
}

handleClick函数：prevState是什么？我为此感到困惑，因为它从未被初始化为var或let或类似的东西。
我认为onClick道具应该接受一个函数（即handleClick()）。但是handleClick()的写入方式看起来会返回新状态吗？那么{this.handleClick}会返回更新后的状态吗？

Answer 1

什么是prevState？

这是调用handleClick函数之前的状态。 setState函数用于更改react组件的状态。此setState函数可以接受一个函数，该函数接收当前状态作为参数，然后在函数主体中对其进行修改。要完全了解如何修改组件的状态以及setState函数的工作方式，请参见using state correctly in react

那么{this.handleClick}会返回更新后的状态吗？

不。单击按钮时，它将调用handleClick函数。请参阅handling events in react，以更好地了解它如何在反应中发挥作用

Answer 2

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

可以被重写为

handleClick() {
        this.setState({isLoggedIn: !this.state.isLoggedIn})
    }

setState可以是一个函数，也可以将一个对象传递给它。如果您刚入门，建议您将其传递给它，因为它考虑起来更简单。人们之所以使用更新程序功能，是因为它引用了先前的状态，即更改前的状态，这对于批量更改很有用。

例如，假设您使用状态更新功能将状态计数增加3次，则最终计数将为3。

state = {count: 0}

this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))

this.state.count = 3

如果仅使用常规对象将状态增加3次，则更改将一起批处理。经常被忽略的是setState是异步的。状态可能不会在调用setState时立即更改，因为反应会批量更改状态以提高性能。

state = {count: 0}

this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})

this.state.count = 1

因此，如果您需要引用当前状态，请使用更新程序功能；如果不需要，则可以使用一个对象。

ReactJS：handleClick语法

2 个答案: