React学习3（组件实例三大核心之state）

最新推荐文章于 2024-10-31 16:49:04 发布
最新推荐文章于 2024-10-31 16:49:04 发布
阅读量423 收藏
点赞数 1
文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaojian044/article/details/128305025
版权

state的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>state</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test">

  </div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>

  <script type="text/babel">
    //1.创建组件
    class Weather extends React.Component{
      constructor(props) {
        super(props)
        // 初始化状态
        this.state = {isHot: true}
      }
      render() {
        console.log(this)
        //读取状态
        const {isHot} = this.state
        return  <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
        // return <h1>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
      }
    }
    // 2.渲染组件
    ReactDOM.render(<Weather />, document.getElementById('test'))
  </script>
</body>
</html>

react中的事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react中的事件绑定</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test">

  </div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>

  <script type="text/babel">
    //1.创建组件
    class Weather extends React.Component{
      constructor(props) {
        super(props)
        // 初始化状态
        this.state = {isHot: true}
      }
      render() {
        console.log(this)
        //读取状态
        const {isHot} = this.state // 结构赋值
        return  <h1 onClick= {demo}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
      }
    }
    // 2.渲染组件
    ReactDOM.render(<Weather />, document.getElementById('test'))

    // const title = document.getElementById('title')
    // title.addEventListener('click', () => {
    //   alert('标题被点击了')
    // })

    // const title = document.getElementById('title')
    // title.onclick= () => {
    //   alert('标题被点击了')
    // }

    function demo() {
      console.log('标题被点击了')
    }
  </script>
</body>
</html>

注意：在进行事件绑定的时候不要使用addEventListener和onclick，避免使用原生js，而是在标签

中添加属性onClick，on后面的单词的首字母必须大写，绑定的的回调函数不要写小括号

类中的this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类中的方法this</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test">

  </div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>

  <script type="text/babel">
  
    //1.创建组件
    class Weather extends React.Component{
      constructor(props) {
        // 构造器调用几次-----1次
        // console.log('constructor')
        super(props)
        // 初始化状态
        this.state = {isHot: true,wind:'微风'}
        console.log(this);
        // 解决changeWeather中this指向问题
        this.changeWeather = this.changeWeather.bind(this)
      }
      render() {
        // render调用了几次------1+n次，1是初始化的那次,n是状态更新的次数
        // console.log('render');
        // console.log(this)
        //读取状态
        const {isHot,wind} = this.state // 结构赋值
        return  <h1 onClick= {this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
      }
      // changeWeather调用了几次----点几次调用几次
      changeWeather() {
        console.log(this);
        //changeWeather放在了哪里？----Weather的原型对象上，供实例使用
        //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
        // 类中的方法默认开启了局部的严格模式，所以changeWeather中的this是undefined
      // console.log('标题被点击了')

      // 获取原来的isHot
      const isHot = this.state.isHot

      // 严重注意:状态的修改必须使用setState进行更新，且更新时一种合并，不是替换
      this.setState({isHot:!isHot})

      // 严重注意：状态（state）不可直接更改，下面这行就是直接更改
      // this.state.isHot = !isHot  // 这是错误的写法
      // console.log(this.state.isHot)
     }
    }
    // 2.渲染组件
    ReactDOM.render(<Weather />, document.getElementById('test'))

   
  </script>
</body>
</html>

state的简写形式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>state的简写方式</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test">

  </div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>

  <script type="text/babel">
  
    //1.创建组件
    class Weather extends React.Component{
      // 初始化状态
      state = {isHot: true,wind:'微风'}
      render() {
        const {isHot,wind} = this.state 
        return  <h1 onClick= {this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
      }
      // 自定义方法----要用赋值语句+箭头函数
      //此处使用箭头函数后，this指向与外层函数的指向相同，this指的是Weather实例
      //所以不用写 this.changeWeather = this.changeWeather.bind(this)来修改this指向
      changeWeather = () => {
      const isHot = this.state.isHot
      this.setState({isHot:!isHot})
     }
    }
    // 2.渲染组件
    ReactDOM.render(<Weather />, document.getElementById('test'))

   
  </script>
</body>
</html>

总结state:

1)理解：

state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）；

组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）；

在进行state数据的初始化的时是在实例对象自身进行添加，可以不在构造器函数内部书写，可直

接写state= {属性：'属性值'}

2）强烈注意：

组件中render方法中的this为组件实例对象 组件自定义中的方法this为undefined，如何解决？

        强制绑定this:通过函数对象的bind()---在构造函数中进行修改this指向

        箭头函数-----必须写赋值语句，也就是state的简写形式

3）状态数据：不能直接修改或者是更新，修改状态使用setState

xiaojian044
关注
【React】2、面向组件编程——组件实例的三大核心属性state、props和refs超详解
Coding and studying
05-24 1310
React面向组件编程 文章目录React面向组件编程一、使用 React 开发者工具调试二、基本理解和使用2.1 函数式组件（适用于简单组件<无状态组件>的定义）2.2 类式组件（适用于复杂组件<有状态组件>的定义）三、组件实例的三大核心属性1、状态（state）理解强烈注意示例效果state 标准写法state 简写2、props理解作用编码操作示例效果在类式组件中使用props在类式组件中使用props-简写在函数式组件中使用props3、refs理解示例效果字符串形式的ref
React实例练习四State状态
GJM_CSDN的博客
05-23 278
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="build/react.js"&
React中关于state的两个例子
C_jiayouya的博客
01-30 786
1.第一个例子 利用state改变天气的状态 <!-- 准备一个容器 --> <div id="test"></div> ...引入React库(此处省略) <script type="text/babel"> //1.创建组件 class Weather extends React.Component { constructor(props) { super(pro
React State(状态)
cccbbbmmm的博客
09-09 60
React 的状态（State）是管理 React 组件中数据的一种机制。状态可以存储组件的可变数据，并在组件渲染时更新。当状态发生变化时，React 会重新渲染组件以反映这些变化。这个方法接受一个新的状态对象，并触发 React 重新渲染组件。通过传递新的状态对象，可以更新组件中的数据。要使用状态，需要在 React 组件的构造函数中初始化一个状态对象。然后，可以在组件的渲染方法中使用状态值来展示数据。来更新状态，从而触发重新渲染并显示最新的计数值。要更新状态，必须使用。
react基础 - 组件实例的三大核心属性-state
hibufan的博客
07-06 229
React基本原理和使用
React03——组件实例三大属性之state属性
小白的学习路
03-12 180
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 强烈注意 组件中render方法中的this为组件实例对象 组件自定义的方法中this为undefined，如何解决？1）强制绑定this: 通过函数对象的bind() 2）箭头函数 状态数据，不能直接修改或更新 <!DOCTYPE html> <html lang="en"> <head&g..
react中组件实例的三大核心属性（state、props、refs）
fangqi20170515的博客
07-28 649
react中组件实例的三大核心属性（state、props、refs）
React系统学习2（组件三大核心属性之state）
程序员涂小哥的技术博客
04-10 1265
之前简单学习的react中函数式组件和类式组件的基本使用，函数式组件适用于定义简单的组件，类式组件适用于定义复杂的组件。 复杂的组件指的是有状态的组件，所谓的状态，在react中就是三大核心属性之一的state。 从一个小例子说起 假设需要这个一样组件，访问的时候展示一个人的名字和心情，当点击的时候就切换到另一个人，再次点击就再切换回去。 那么对这个需求进行分析，就会知道首先肯定是需要有地方进行信息展示，然后就是肯定需要有点击事件，再然后就是需要有地方保存数据。 基于上边的分析，在还不是太会react的情
React学习计划-React16--React基础（二）组件与组件的3大核心属性state、props、ref和事件处理
我愿化作繁星
12-20 856
函数式组件（适用于【简单组件】的定义）类组件（适用于【复杂组件】的定义）组件内的标签可以定义。
React学习之受控组件与数据共享实例分析
01-19
本文实例讲述了React学习之受控组件与数据共享。分享给大家供大家参考，具体如下： 在HTML当中，像<input>,<textarea>, 和 <select>这类表单元素会自己储存值，并且根据用户输入进行更新。但在...
react中组件实例三大属性之一ref介绍以及用法
weixin_48952990的博客
08-09 1472
react中组件实例三大属性之一ref介绍以及用法
6. React组件三大核心属性之state
人无远虑,必有近忧.
03-29 270
文章目录1. state作用2. state实例2.1 实例要求2.2 先写出静态页面3.实现切换功能4. 完整代码 1. state作用 存储数据 2. state实例 2.1 实例要求 实例：页面生成一个h2标题，并点击标题，切换内容显示 如 ： 今天天气很炎热，点击标题，让天气在炎热和凉爽之间切换 2.2 先写出静态页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
十分详细的React入门实例
热门推荐
王浴昊
09-26 8万+
学习React不是一蹴而就的事情，入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例，实例并不难，但对于初学者而言，足够认清React的思考和编写过程。认真完成这个实例的每一个细节会让你受益匪浅。接下来我们开始吧！代码下载预览首先说明一下，本例究竟做了什么。本文实现了一个单页面人员管理系统的前台应用。包括以下功能： 人员基本信息列表； 人员的录入及删除； 人员详细信息的
【React系列六】—React学习历程的分享
m0_60623820的博客
10-30 396
React-Router6，一些新增特性及使用方法讲解
react-路由
a2739294436的博客
10-31 185
4.创建页面组件 pages/home/index.js。2.配置文件 router/index.js。3.创建文件 pages/mian.js。5.在入口文件App.js导入router。
尚硅谷-react教程-求和案例-最终版-笔记
呵呵哒!的博客
10-26 459
(2).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer。(1).所有变量名字要规范，尽量触发对象的简写形式。## 8.求和案例_react-redux最终版。
尚硅谷-react教程-求和案例-@redux-devtools/extension 开发者工具使用-笔记
呵呵哒!的博客
10-26 501
安装和使用 Redux DevTools 插件-CSDN博客。
尚硅谷-react教程-求和案例-异步action版-笔记
呵呵哒!的博客
10-26 552
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。(2).何时需要异步action：想要对状态进行操作，但是具体A的数据靠异步任务返回。1).yarn add redux-thunk,并配置在store中。3).异步任务有结果后，分发一个同步的action去真正操作数据。(1).明确：延迟的动作不想交给组件自身，想交给actionA。
React 所有的 hooks 方法，以及用法
最新发布
Rverdoser的博客
10-31 195
Hello
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值