006 state（状态）

最新推荐文章于 2023-07-07 08:52:04 发布

猴子敲代码

最新推荐文章于 2023-07-07 08:52:04 发布

阅读量217

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/test253506088/article/details/117963615

版权

React 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

这篇博客介绍了React中状态(state)的概念及其与属性(props)的区别。通过一个示例展示了如何在组件中使用state，并通过this.setState()方法异步更新状态，从而触发自动重新渲染。文章还通过代码对比说明了this.setState()的异步性质，强调了在回调函数中获取更新后状态的重要性。

摘要由CSDN通过智能技术生成

React中我们关心的是数据，当数据发生改变，页面就会自动花生改变。

状态（state）等同于页面中的数据，状态（数据）发生该变，页面中对应的数据绑定内容就会被react自动进行改变。类似于vue的响应式。

声明式渲染：一切数据改变操作都不用我们操心，只需要我们声明好数据，react就会自动对数据进行相应的改变。

State和props的区别：

Prpos是组件对外的接口，state是组件对内的接口
State是可变的，props是只读的，除非你在父组件里修改传递给子组件的props

如果想要使用state，是不可以使用函数组件（无状态组件）的。

先来看一个案例来了解state，这里使用this.setState({key:value})对state进行修改，this.setState({key:value})方法是异步的，修改后会触发react的render()方法自动重新渲染：

<body>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        class MySub extends React.Component {
            //constructor可以理解为java的构造方法，区别在于js必须调用super()
            constructor(props) {
                super(props);
                //设置state的数据
                this.state = {
                    number: 0,
                    name: "黑白大彩电"
                }
            }
            render() {
                return (
                    <div>
                        <button type={"button"}
                            onClick={() => {
                                this.setState({
                                    "number": this.state.number + 1
                                });
                            }}>
                            点我自增
                        </button>
                        <p>当前值：{this.state.number}</p>
                        <p>名称：{this.state.name}</p>
                    </div>
                );
            };
        };
        ReactDOM.render(<MySub />, document.getElementById("app"));
    </script>
</body>

可以看到state修改后自动刷新dom。

为了验证this.setState({key:value})方法是异步的，我们分别在回调函数和非回调函数里输出number的值。

<body>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        class MySub extends React.Component {
            //constructor可以理解为java的构造方法，区别在于js必须调用super()
            constructor(props) {
                super(props);
                //设置state的数据
                this.state = {
                    number: 0,
                    name: "黑白大彩电"
                }
            }
            clickFunction = () => {
                this.setState({
                    "number": this.state.number + 1
                }, () => {
                    console.log(`回调输出：当前数值：${this.state.number}`);
                });
                console.log(`非回调输出：当前数值：${this.state.number}`);
            }
            render() {
                return (
                    <div>
                        <button type={"button"} onClick={this.clickFunction}>
                            点我自增
                        </button>
                        <p>当前值：{this.state.number}</p>
                        <p>名称：{this.state.name}</p>
                    </div>
                );
            };
        };
        ReactDOM.render(<MySub />, document.getElementById("app"));
    </script>
</body>

点击后可以看到，回调函数里是自增后的number，非回调函数里还是原先的number。

猴子敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
006 state（状态）

React中我们关心的是数据，当数据发生改变，页面就会自动花生改变。状态（state）等同于页面中的数据，状态（数据）发生该变，页面中对应的数据绑定内容就会被react自动进行改变。类似于vue的响应式。声明式渲染：一切数据改变操作都不用我们操心，只需要我们声明好数据，react就会自动对数据进行相应的改变。State和props的区别：Prpos是组件对外的接口，state是组件对内的接口State是可变的，props是只读的，除非你在父组件里修改传递给子组件的props...
复制链接

扫一扫

专栏目录