首页 > 其他分享> > React学习记录（二） - state的用法以及类组件中this执向

React学习记录（二） - state的用法以及类组件中this执向

2021-12-07 12:01:33 作者：互联网

我们可以用一个实际案例去开启本节：

页面有一个标签，内容为 今天天气很炎热，当点击标签时切换为凉爽

在Vue中我们直接使用@click=‘isHot ? "炎热"’ : "凉爽"实现切换，isHot要在data里面去定义。但在React中我们如何去实现呢？

直接上代码，然后解析吧

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

  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></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指向
        this.change = this.changeWeather.bind(this)
      }
      render() {
        return (
          <h1 onClick={this.change}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
        )
      }
      changeWeather() {
        this.setState(prevState => ({
          flag: !prevState.isHot
        }))
        console.log(this.state.isHot)
      }
    }
    ReactDOM.render(<Weather />, document.querySelector('#app'))
    
  </script>
</body>

首先在Weather类里定义构造器（constructor），继承父类的属性以及创建自己的新属性
声明state，就是组件要用到的数据。名称一定要为state，这是React的规定
定义render函数，创建元素以及绑定事件
- React绑定事件必须使用中括号，并且要使用this，不然会找不到方法
定义changeWeather函数，在里面修改isHot的值，注意不能直接修改state里面的值，要使用setState方法。原因见文档
- 如果此时在onClick中绑定的是changeWeather方法，那么changeWeather中的this是undefined。原因是：只有实例对象调用原型上的方法时，this才指向实例对象。所有咱们需要更改一下this执行。用bind，因为它可以返回一个函数。官网示例
setState也可以直接用对象的形式赋值，并且可以只写当前改变的对象，因为setState的更新会合并。

由以上例子可以看出，React还是非常接近原生JS的，必须得有一定的JS基础才能掌握好React

标签：changeWeather,render,执向,isHot,React,state,setState
来源： https://blog.csdn.net/xzwwjl1314/article/details/121764957