React基础教程(八) - 博客详情

React把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

1.state

React里，只需更新组件的state，然后根据新的state重新渲染用户界面（不要操作 DOM）。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            // 初始化状态
            this.state = {
                isHot: true
            }
        }
        render() {
            console.log(this)
            return (
                <div>App</div>
            )
        }
    }

    ReactDOM.render(<App/>, document.getElementById('app'))
</script>
</body>
</html>

我们启动项目后打开控制台，看到以下结果：

2.设置状态setState 在react中提供了一个 setState 方法，这个方法主要用来修改组件的状态，调用这个方法后，react将会调用react-dom中的render方法重新渲染页面。

修改上面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
    <style>
        .mylink{
            cursor:pointer;
        }
    </style>
</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            // 初始化状态
            this.state = {
                isHot: true
            }
            // 解决 this 的指向问题
            this.clickTitle = this.clickTitle.bind(this)
        }
        clickTitle() {
            console.log('标题被点击了');
            //this.state.isHot = !this.state.isHot  //错误的写法

            this.setState({ isHot: !this.state.isHot })
        }

        render() {
            console.log(this)
            return (
                /*
                <div>App</div>*/
                <h2 className="mylink" onClick={ this.clickTitle }>今天天气很{this.state.isHot ? '炎热' : '寒冷'}</h2>
            )
        }
    }

    ReactDOM.render(<App/>, document.getElementById('app'))
</script>
</body>
</html>

运行结果：点击标题，我们发现天气在炎热和寒冷之间不停的切换。