Question

许多人直接在this（例如 this.clickCount）而不是this.state对象上使用属性，有时候会有20个不同的属性直接附加到this。

this.state纯粹是为了组织还是还有其他相关内容？为什么这么多人/项目没有使用this.state？

以下两个示例的工作方式完全相同。

状态代码示例：

class Clicker extends React.Component {

    constructor() {
        super()

        this.state = {
            clickCount: 0
        }

        this._onClick= this._onClick.bind(this)
    }

    render() {
        return (

            <button onClick={this._onClick}>
                Clicked {this.state.clickCount} times
            </button>
        )
    }

    _onClick() {
        this.setState({
            clickCount: this.state.clickCount + 1
        })
    }
}

没有状态的代码示例：

class Clicker extends React.Component {

    constructor() {
        super()

        this._onClick= this._onClick.bind(this)
    }

    render() {
        return (

            <button onClick={this._onClick}>
                Clicked {this.clickCount ? this.clickCount : 0} times
            </button>
        )
    }

    _onClick() {
        this.clickCount = (this.clickCount ? this.clickCount : 0) + 1
    }
}

Answer 1

有些情况下，您只需要与state无关的实例变量。对于这些，只需执行this.<INSTANCE-VARIABLE>。

之类的操作

当您希望在更改值时重新呈现组件时，最好将该值附加到state并使用this.setState(..)进行修改。

Answer 2

第一个示例将在调用_onClick时触发组件的重新呈现，因为状态已更改。

第二个示例在调用_onClick时不会触发组件的重新渲染，因此您可能在一段时间内看不到更新的值（直到其他东西再次渲染组件）。

直接说明＆＃34;这＆＃34;

状态代码示例：

没有状态的代码示例：

2 个答案: