React学习（状态数据更新）

学习目标：

提示：两个小时学会React状态数据更新

例如：

两个小时学会React状态数据更新

学习内容：

提示：学会React状态数据更新

（6）状态数据更新

React特性是单向数据流，也就是所谓的单向数据绑定，数据的更新包含数据模块更新以及视图更新两部分

直接修改变量数据，变量数据更新，但是视图不会同步更新，这就是单向数据流
推荐：更新变量数据，通过this.setState({key: value, key2: value, ...})的形式进行更新，既能更新变量数据，同时也会推送更新视图界面
不推荐：直接更新变量数据，最后通过调用this.setState({})刷新视图界面
注意：setState({})是一个异步函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div id="app"></div>
        <script src="../../js/react17.0.2.development.js"></script>
        <script src="../../js/react-dom17.0.2.development.js"></script>
        <script src="../../js/babel.min.js"></script>

        <script type="text/babel">
            // 使用React的组件化
            class Home extends React.Component {
                state = {
                    pageTitle: "系统首页",
                    flag: true
                }

                changeLanguage1() {
                    //直接修改数据， 不会同步视图界面
                    if (this.flag){
                        this.state.pageTitle = "系统首页"
                        this.flag = false
                        console.log("111")
                    } else {
                        this.state.pageTitle = "SYSTEM HOME"
                        this.flag = true
                        console.log("222")
                    }

                    // 调用函数通知页面视图更新
                    this.setState({})

                    // setState({})更新的数据，直接通过同步方式打印展示，不一定能看到最新数据
                    // 如果想查看更新的最新数据，建议在setState({}, ()=> {...})回调函数中执行
                    console.log(this.state.pageTitle)
                }

                changeLanguage2() {
                    // 【推荐】React提供了一个主动更新视图数据的函数setState({key:value,...})
                    // setState({})是一个异步函数
                    if (this.flag){
                        this.setState({pageTitle : "系统首页"}, function () {
                            console.log("setState()回调函数查看数据更新:", this.state.pageTitle)
                        })
                        this.flag = false
                    } else {
                        this.setState({pageTitle : "SYSTEM HOME"}, function () {
                            console.log("setState()回调函数查看数据更新:", this.state.pageTitle)
                        })
                        this.flag = true
                    }
                }


                // 渲染数据
                render() {
                    return <div>
                        <h1>{this.state.pageTitle}</h1>
                        <button onClick={this.changeLanguage1.bind(this)}>更换语言环境- 直接修改数据，统一调用同步</button>
                        <button onClick={this.changeLanguage2.bind(this)}>更换语言环境-主动更新视图</button>
                    </div>
                }
            }

            ReactDOM.render(<Home></Home>, document.querySelector("#app"))
        </script>
</body>
</html>

在这里插入图片描述