React：从头学state

前端卡卡西呀

已于 2022-06-27 17:24:44 修改

阅读量510

点赞数

分类专栏： React 前端进阶之路文章标签： react.js 前端

于 2022-01-28 16:47:39 首次发布

本文链接：https://blog.csdn.net/RedaTao/article/details/122657717

版权

前端进阶之路同时被 2 个专栏收录

144 篇文章 5 订阅

订阅专栏

React

16 篇文章 0 订阅

订阅专栏

初始版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    class Weather extends React.Component {
        constructor(props) {
            super(props);

            this.state = {isHot: true};

            this.changeWeather = this.changeWeather.bind(this); // changeWeather中可以 通过 this 调用组件 实例
        }

        render(h) {
            let {isHot} = this.state;

            return (
                <div onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '寒冷'}</div>
            )
        }

        changeWeather() {
            let { isHot } = this.state;

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

    ReactDOM.render(<Weather/>, document.getElementById('app'));
</script>
</html>

上边版本，每增加一个方法，都需要在 constructor中使用bind绑定一次，太繁琐，
变动点：

无需 constructor，state直接赋值，后续也可通过 this.state 取值；
无需在 constructor 中使用bind 绑定时间的this，直接使用箭头函数赋值给函数变量，即可在该函数内使用 this 获取组件实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    class Weather extends React.Component {
        state = {isHot: true}; // state 挂在 实例下，可通过 this.state 获取

        render(h) {
            let {isHot} = this.state;

            return (
                <div onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '寒冷'}</div>
            )
        }

        changeWeather = () => { // 箭头函数内部的 this 指向箭头函数创建时的 this，也就是 Weather组件实例，所以不再需要 使用 bind 绑定
            let { isHot } = this.state;

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

    ReactDOM.render(<Weather/>, document.getElementById('app'));
</script>
</html>