React State 状态

和 Vue 的思想不同，在 React 中的变量并不是所有的都是在实时变化中的，所以需要状态 State 去维护需要刷新和变化的变量，当需要更新组件中的某个变量值的时候，需要更新组件的 state —— 当然这个变量也需要在 state 中，这样更新了 state 后， React 会根据新的 state 重新渲染页面。
而 state 也是 React.Component 这个类中的成员变量，具体的定义可以参考 React 的源代码：

 state: Readonly<S>;

需要更新的变量只要声明在构造函数的 state 中就可以通过 state 控制这些变量的更新：

class Hello extends React.Component {
    constructor() {
        super()
        this.state = {
            clickText: ""
        }
    }
    render() {
        return (
            <div>
                <h1>hello world</h1>
                <p>{this.state.clickText}</p>
            </div>
        )
    }
}

接下来可以加一个按钮，当按钮点击的时候，显示出 click 的字样。这个时候，就需要对state进行操作，更新 state 操作使用 Component 这个父类的 setState 方法，这个方法是这样声明的

setState<K extends keyof S>(
   state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
   callback?: () => void
): void;

所以可以当触发点击事件的时候，调用这个函数，是 state 发生变化，这样就能看到对应的地方先输出发生变化后的内容了。

class Hello extends React.Component {
    constructor() {
        super()
        this.state = {
            clickText: ""
        }
    }
    render() {
        return (
            <div>
                <h1>hello world</h1>
                <p>{this.state.clickText}</p>
                <button 
                    onClick={()=> {
                        this.setState({
                            clickText: "this is click"
                        })
                    }}
                >click</button>
            </div>
        )
    }
}

当点击按钮的时候，会触发 setState 函数，将 state 中的 clickText 的内容赋值为 "this is click" ，然后 React 会因为 state 发生了更新，重新渲染页面，将新的值展示出来。
可以做一个对比，如果这个变量不是 state 的且不使用 setState 方法，React 会重新渲染页面吗？

class Hello extends React.Component {
    constructor() {
        super()
    }
    outClickText = ""
    render() {
        return (
            <div>
                <h1>hello world</h1>
                <p>{this.state.clickText}</p>
                <button 
                    onClick={()=> {
                        this.outClickText = "this is click"
                        console.log(this.outClickText)
                    }}
                >click</button>
            </div>
        )
    }
}

通过点击按钮，可以看到控制台输出的变量的值是 "this is click" ，但是页面的显示的值并没有变化，这说明，如果该变量不是 state 中的，更新了，React 是不会重新渲染页面的。同样的，如果是 state 中的元素，只是单纯的赋值，没有使用 setState 方法更新，React 也不会更新状态，是不会进行渲染的。

class Hello extends React.Component {
    constructor() {
        super()
        this.state = {
            clickText: ""
        }
    }
    render() {
        return (
            <div>
                <h1>hello world</h1>
                <p>{this.state.clickText}</p>
                <button 
                    onClick={()=> {
                        this.state.clickText = "this is click"
                        console.log(this.state.clickText)
                    }}
                >click</button>
            </div>
        )
    }
}

这个时候，点击按钮，在控制台中可以看出，变量已经被赋值为 "this is click" ，但是因为没有使用 setState 更新，所以 React 并不会认为这是状态更新，也不会重新渲染页面，所以页面上还是没有出现新的变化。

最后编辑于：2020.01.11 01:52:01