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

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

作者:互联网

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

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

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

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

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