react 基础（状态组件+state）

已于 2022-03-17 16:51:51 修改
阅读量546 收藏
点赞数 1
分类专栏： React 文章标签： react.js 前端
于 2022-03-09 11:27:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xy_is_fhh/article/details/123349069
版权

目录

有状态组件和无状态组件

state的基本使用

从JSX中抽离事件处理程序

事件绑定this指向

 表单处理

1.受控组件

2.非受控组件(DOM方式)

有状态组件和无状态组件

 · 函数组件又叫做无状态组件，类组件又叫做有状态组件

· 状态(state)即数据

· 函数组件没有自己的状态，只负责数据展示(静)

· 类组件有自己的状态，负责更新UI，让页面“动”起来

state的基本使用

· 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用

· state的值是对象，表示一个组件中可以有多个数据

 初始化 👇

import React from 'react'
import ReactDOM from 'react-dom'

/*React事件对象*/

class App extends React.Component {
    /* constructor() {
        super()

        //初始化state
        this.state = {
            count: 0 
        }
    } */

    //简化语法初始化state
    state = {
        count: 0
    }
    render() {
        return (
            <div>
                <h1>计数器：</h1>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

· 获取状态：this.state

import React from 'react'
import ReactDOM from 'react-dom'

/*React事件对象*/

class App extends React.Component {
    /* constructor() {
        super()

        //初始化state
        this.state = {
            count: 0 
        }
    } */

    //简化语法初始化state
    state = {
        count: 10
    }
    render() {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

 setState() 修改状态

· 状态是可变的

· 语法：this.setState（{要修改的数据}）

· 注意：不要直接修改state中的值，这是错误的！！！

· setState()作用：1.修改state    2.更新UI

· 思想：数据驱动视图

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
        
    }
    render() {
      return (<div>
          <p>计数器：{this.state.count}</p>
          <button onClick={()=>{
              this.setState({
                count: this.state.count + 1
            })
          }}>+1</button>
          </div>)
        }
  }

  export default Hello

 

从JSX中抽离事件处理程序

· JSX中掺杂过多JS逻辑代码，会显得非常混乱

· 推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰

· 原因：事件处理程序中this的值为undefined

· 希望：this指向组件实例(render方法中的this即为组件实例)

事件绑定this指向

1.箭头函数

· 利用箭头函数自身不绑定this的特点

· render() 方法中的this为组件实例，可以获取到setState()

import React from 'react'
import ReactDOM from 'react-dom'

/*React事件对象*/

class App extends React.Component {
    //简化语法初始化state
    state = {
        count: 0
    }

    //事件处理程序
    onIncrement() {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={() => this.onIncrement()}>+1</button>
                {/* <button onClick={this.onIncrement}></button> */}
                {/* <button onClick={() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }}>+1</button> */}
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

2.Function.prototype.bind()

· 利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

import React from 'react'
import ReactDOM from 'react-dom'

/*React事件对象*/

class App extends React.Component {
    //简化语法初始化state
    state = {
        count: 0
    }

    constructor() {
        super()
        this.onIncrement = this.onIncrement.bind(this)
    }

    //事件处理程序
    onIncrement() {
        console.log('事件处理程序中的this：', this)
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

3.class的实例方法（推荐！！！）

· 利用箭头函数形式的class实例方法

· 注意：该语法是实验性语法，但是，由于babel的存在可以直接使用

 

表单处理

1.受控组件

· HTML中的表单元素是可输入的，也就是有自己的可变状态

· 而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改

· React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值

· 受控组件：其值受到React控制的表单元素

步骤：

1.在state中添加一个状态，作为表单元素的value值(控制表单元素值的来源)

2.给表单元素绑定change事件，将表单元素的值设置为state的值(控制表单元素值的变化)

import React from 'react'
import ReactDOM from 'react-dom'

/*React事件对象*/

class App extends React.Component {
    //简化语法初始化state
    state = {
        txt: ''
    }

    handleChange = e => {
        this.setState({
            txt: e.target.value
        })
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.txt} onChange={this.handleChange} />
            </div>
        )
    }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

 多元素表单👇

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
    state = {
        txt: '',
        content: '',
        city:'',
        isChecked:false
    }

    // 处理文本框的变化
    handleChange = e => {
        this.setState({
            txt: e.target.value
        })
    }

    // 处理富文本框的变化
    handleContent = e => {
        this.setState({
            content: e.target.value
        })
    }

    // 处理下拉框的变化
    handleCity = e => {
        this.setState({
            city: e.target.value
        })
    }

    // 处理复选框的变化
    handleChecked = e => {
        this.setState({
            isChecked: e.target.checked
        })
    }

    render() {
      return (<div>
          {/* 文本框 */}
          <input type="text" value={this.state.txt} onChange={this.handleChange}/><br/><br/>

          {/* 富文本框 */}
          <textarea value={this.state.content} onChange={this.handleContent}></textarea><br/>

          {/* 下拉框 */}
          <select value={this.state.city} onChange={this.handleCity}>
              <option value="cz">滁州</option>
              <option value="wx">无锡</option>
              <option value="yz">扬州</option>
              <option value="nj">南京</option>
          </select><br/>

          {/* 复选框 */}
          <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked} />
          </div>)
        }
  }

  export default Hello

 

多表单元素优化：

· 问题：每个表单元素都有一个单独的事件处理程序太繁琐

· 优化：使用一个事件处理程序同时处理多个表单元素

多表单元素优化步骤：

1.给表单元素添加name属性，名称与state相同

2.根据表单元素类型获取对应值

3.在change事件处理程序中通过[name]来修改对应的state

 多表单元素优化后👇

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
    state = {
        txt: '',
        content: '',
        city:'',
        isChecked:false
    }

    handleForm = e => {
        // 获取当前DOM对象
        const target = e.target

        //根据类型获取值
        const value = target.type === 'checkbox'
        ? target.checked
        : target.value

        // 获取name
        const name = target.name

        this.setState({
            [name]: value
        })
    }

    render() {
      return (<div>
          {/* 文本框 */}
          <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm}/><br/><br/>

          {/* 富文本框 */}
          <textarea value={this.state.content} name="content" onChange={this.handleForm}></textarea><br/>

          {/* 下拉框 */}
          <select value={this.state.city} name="city" onChange={this.handleForm}>
              <option value="cz">滁州</option>
              <option value="wx">无锡</option>
              <option value="yz">扬州</option>
              <option value="nj">南京</option>
          </select><br/>

          {/* 复选框 */}
          <input type="checkbox" checked={this.state.isChecked} name="isChecked" onChange={this.handleForm} />
          </div>)
        }
  }

  export default Hello

2.非受控组件(DOM方式)

· 说明：借助于ref，使用原生DOM方式来获取表单元素值

· ref的作用：获取DOM或组件

import React from 'react';
import ReactDOM from 'react-dom';

// 非受控组件
class Hello extends React.Component {
    constructor() {
        super()

        //创建ref
        this.txtRef = React.createRef()
    }
    // 获取文本框的值
    getTxt = () => {
        console.log('文本框值为：', this.txtRef.current.value);
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.txtRef} />

                <button onClick={this.getTxt}>获取文本框的值</button>
            </div>
        )
    }
}
    
  export default Hello

 

夏大爷耶耶耶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（1596）：state基础
歌谣的博客
06-30 220
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/react...
React组件基础--两种创建方式，函数和类创建组件，抽离为独立 JS 文件，React 事件处理，有和无状态组件和组件中的 state 和 setState，事件绑定 this 指向的三种方法
m0_54088431的博客
09-02 733
组件表示页面中的部分功能；组合多个组件实现完整的页面功能；特点：可复用、独立、可组合推荐：使用class的实例方法}箭头函数bindsuper()}
React类组件的状态
Sirius小鑫的博客
11-09 1126
setState修改状态更新可能是异步的，会批量推迟更新，在调用setState后直接访问state是还没有更新的状态，在生命周期函componentDidUpdate或者setState的第二个参数的回调函数中访问到的state才是更新完后的状态，而且React出于性能考虑会合并多个setState。在react18之前，类组件的状态更新setState在setTimeOut、setInterval这样的异步逻辑中执行，react会同步更新状态和dom，在同步逻辑中则会异步更新状态和dom。
React基础—state组件使用及分类
梦否
05-27 531
1. setState的简单实践和理解 比如说，我们需要定义一个列表组件。当点击奇数列表的时候随机调换一下顺序；当点击偶数列表的时候在其后加=和不加=号之间切换。 1.1 代码实现 <body> <div id="test"></div> <script crossorigin src="./js/react.development.js"></script> <script crossorigin src="./js/react-dom.
state基本使用(react)
0.0 的博客
01-23 1358
State，翻译为“状态”，实际指的就是组件中的数据。React 中给类组件提供了一个 state 属性用来管理组件内部的私有数据 (状态)。 在 React 16.8 版本之前，函数式组件也称为”无状态组件”，也就是说在函数式组件内部无法去定义组件的状态。所以暂时我们只针对类定义组件来学习 State 的使用。 定义 state 数据 类组件中的 state，是将其作为了组件实例对象的一个属性在 constructor 中去进行初始化。 import React, { Component } from '
第六章 react组件实例中三大属性之State
天界程序员的博客
03-22 435
学习react的属性state
React State(状态)
01-19
React State(状态) React 把组件看成是一个状态机（State Machines）。...添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。 React 实例 class Clock extends
浅谈React之状态(State)
01-19
你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。 如何定义State 定义一个合适的State，是正确创建组件的...
React上下文+状态-React开发
05-27
context + state = constate〜2KB React状态管理库，可让您使用本地状态并轻松扩展到全局状态。 安装npm：npm i -S constate纱线：yarn add constate context + state = constate〜2KB React状态管理库，可让您使用...
react-state:本地化React状态组件
05-29
React状态 React 渲染函数中的本地化状态。 npm install react-state --save class Counter { render ( ) { return < State xss=removed> { ( val , set ) => < div xss=removed> set ( val + 1 ) } > clicked...
react-component-state:管理React组件的状态
05-26
了解使用React HOOKS管理功能组件之间状态的不同方法 我已经将不同的方式分为多个分支 分行 基本道具钻探（使用道具提升状态） 传播道具钻探（在使用传播运算符钻取道具{... props}时提升状态） 传播和休息道具...
React中state状态详解
月光晒了很凉快的博客
09-22 3120
修改 state 中的 num 属性数据的同时，让视图更新，用到专门用来修改 state 中数据的方法 setState。
前端React篇之对有状态组件和无状态组件的理解及使用场景
最新发布
星辰迷上大海的博客
03-08 1012
有状态组件用于处理具有内部状态和复杂逻辑的组件，而无状态组件则更适合作为纯展示组件，专注于UI的呈现。在实际开发中，根据组件的功能和需求选择合适的组件类型非常重要。
简述React中无状态组件和有状态组件的区别
weixin_34138255的博客
10-23 1419
React中的组件主要分为无状态组件和有状态组件两类。 1，无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性，以便于组件复用。创建无状态组件如下： var Header = (props) = ( <div>{...
React之state的使用
努力，终归会得到回报
08-22 4745
上一篇介绍过组件之后，这一篇就开始使用组件，然后通过state来进行数据的绑定，下面就让我们一起来通过一个小案例来了解一下吧。 需求：一个文本框，一个按钮，通过点击按钮，获取文本框的值，然后打印出来。 步骤： 1.创建一个ParentComponent.js文件，它包含了刚才的两个组件，那么这个就是上一篇说的符合组件，代码如下 import React, {Component} fro...
React组件：有状态组件和无状态组件
xihuhu的博客
11-07 1171
1.什么是组件状态 定义：是用来描述事务在某一时刻的形态的数据。一般写作state。 特点：状态能够被改变，改变之后视图会发生相应的变化 作用：(1)保存数据(2)为后续更新视图打下基础 比如，设计一个计数器，点击+1按钮后计数器的数字会变化为原数字+1 2.两种状态 2.1无状态组件：不能定义state的组件，函数组件又叫无状态组件 无状态组件一般应用在本身就没有数据更改的地方，比如渲染一段商品的介绍文字，它不需要实时更新，它最大的好处时可以随时复用 2.2有状态组件：能定义state的组
React中的无状态组件和有状态组件
Walter的博客
12-06 1592
React中创建组件的方式 ES5的写法：React.createClass( {} )，接受一个对象参数，切参数内必须含有render函数，通过render函数返回一个组件实例，如 import React from 'react' import ReactDOM from 'react-dom' const SwitchButton = React.createClass({ ge...
有状态组件和无状态组件
ljx920654324的博客
12-27 2079
React 基础知识：有状态组件和无状态组件 注意：使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数； 注意：使用function创建的组件，只有props，没有自己的私有数据和生命周期函数； 有状态组件：用class关键字创建出来的组件(用的最多) 无状态组件：用构造函数创建出来的组件（用的不多） 什么情况下使用有状态组件？什么情况下使用有状态组件？ 如果一...
RN 高阶组件，有状态组件，无状态组件，以及组件之间的交互
黄叔的博客
04-27 1379
高阶组件，有状态组件和无状态组件的定义我就不再多说了，我对个理解的也不是太深入，仅仅是能熟练使用的状态，今天刚好有时间，就记录一下首先这个高阶组件是由多个组件组合起来的，List,List组件中又包含了Banner组件，Banner是一个无状态组件，最后是一个Popup组件我就只把Banner和Popup贴出来了这是一个无状态的Banner组件，仅仅作为数据的展示，没有生命周期，没有转态管理，从父...
react子组件修改父组件state
10-10
在React中，子组件修改父组件的状态是通过回调函数的方式实现的。父组件将一个函数作为props传递给子组件，子组件在需要修改父组件状态时调用该函数。 首先，在父组件中定义一个函数，用来修改需要传递给子组件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值