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

2021-12-07 12:01:33 阅读：173 来源： 互联网

标签：changeWeather render 执向 isHot React state setState

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

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

在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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