软件测试工程师 jackson grid Validator vue教程 bootstrap模板 swift视频教程 jq绑定click事件 spark大数据处理技术 matlab区分大小写吗 java创建字符串数组 plsql卸载 mysql事务 python加法 python指数函数 python编程题 java类 java入门新手教程 java获取当前月份 java怎么编译 java实现队列 火牛软件 源计划卡特 自动喊话器 自动答题软件 联发科mt6750 程序卸载 微信猜拳 文字转语音软件免费版 画图怎么添加文字 网卡驱动安装包 python求和 oemdiy qq黑客软件 dota2控制台 羽化快捷键 金水疑云 快递电子面单打印软件 qt5下载 debian安装教程
当前位置: 首页 > 学习教程  > 编程语言

React-函数式组件和类式组件三大核心属性

2021/1/28 23:56:08 文章标签:

1.组件核心属性之state 1.1类式组件state 1.1.1类式组件初始化state import React, { Component } from reactexport default class Text extends Component {constructor(props) {//构造器中的this就是组件的实例对象super(props);this.state {//初始化state必须是一个对象…

1.组件核心属性之state

1.1类式组件state

1.1.1类式组件初始化state

import React, { Component } from 'react'

export default class Text extends Component {
  constructor(props) {
  	//构造器中的this就是组件的实例对象
    super(props);
    this.state = {//初始化state必须是一个对象
      msg: '欢迎使用React'
    }
  }
  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
      </div>
    )
  }
}

1.1.2类式组件中的setState的两种写法

1.1.2.1类式组件中的setState-对象写法
  • setState(stateChange,[callback])-------对象式的setState
    • stateChange为状态改变对象(该对象可以体现出状态的更改)
    • callback是可选的回调函数,他在状态更新完毕,界面也更新之后(render调用后)才被调用
import React, { Component } from 'react'

export default class Text extends Component {
  state = {
    msg: '欢迎使用react',
    count: 0
  }
  add = (event, str) => {
    let { count } = this.state;
    switch (str) {
      case '非回调函数':
        this.setState({
          count: count + 1
        });
        console.log(this.state.count);
        break;
      case '回调函数':
        this.setState({
          count: count + 1
        }, () => {
          console.log('回调函数中的count', this.state.count);//回调函数中的count就是最新的count
        });
        console.log(this.state.count);//由于setState是一个异步操作,所以这里面的还是没修改之前的count
        break;
    }
  }
  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <p>{this.state.count}</p>
        <button onClick={(event) => {
          this.add(event, '非回调函数')
        }}>+非回调函数 对象写法</button>
        <button onClick={(event) => {
          this.add(event, '回调函数')
        }}>+回调函数 对象写法</button>
      </div>
    )
  }
}
1.1.2.2类式组件中的setState-函数写法
  • setState(updater,[callback])------函数式的setState
    • updater为返回stateChange对象的函数
    • updater可以接收到state和props
    • callback是可选的回调函数,他在状态更新完毕,界面也更新之后(render调用后)才被调用
import React, { Component } from 'react'

export default class Text extends Component {
  state = {
    msg: '欢迎使用react',
    count: 0
  }
  add = (event, str) => {
    switch (str) {
      case '非回调函数':
        this.setState((state, props) => {
          return {
            count: state.count + 1
          }
        });
        console.log(this.state.count);
        break;
      case '回调函数':
        this.setState((state, props) => {
          return {
            count: state.count + 1
          }
        }, () => {
          console.log('回调函数中的count', this.state.count);//回调函数中的count就是最新的count
        });
        console.log(this.state.count);//由于setState是一个异步操作,所以这里面的还是没修改之前的count
        break;
    }
  }
  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <p>{this.state.count}</p>
        <button onClick={(event) => {
          this.add(event, '非回调函数')
        }}>+非回调函数 函数写法</button>
        <button onClick={(event) => {
          this.add(event, '回调函数')
        }}>+回调函数 函数写法</button>
      </div>
    )
  }

1.1.2类式组件中的事件

import React, { Component } from 'react'

export default class Text extends Component {
  constructor(props) {
    console.log('constructor');//构造器调用几次? ==>1次
    super(props);
    this.state = {
      msg: '欢迎使用React',
      bool: false
    };
    this.changeBool = this.changeBool.bind(this)//这句代码的意思为:找到Text原型上changeBool的方法,通过bind的方式将this指向Text的实例对象,并挂载到Text类的自身上
  }
  changeBool() {//调用几次? ==> 出发几次调用几次
    console.log('changeBool');
    // changeBool放在哪里? ------ Text的原型对象上,供Text的实例对象使用
    // 由于changeBool是作为onClick的回调函数,所以是不能通过实例调用的,是直接调用,如果不在构造器中纠正this的指向为Text的实例对象,那么这个this就应该指向window,但是类中的方法默认开启了局部的严格模式,所以changeBool中的this为undefined
    let { bool } = this.state;
    // 警告:状态state不可以直接更改,需要借助一个内置的API取更改 ==> setState
    bool=!bool;//这是错误的写法!!!
    this.setState({//这才是正确的写法,在这里面的更新是一种合并,而不是替换
      bool: !bool
    })
  }
  render() {//调用几次? ==> 1+n次 n就是状态更新的次数
    return (
      <div>
        <h2>{this.state.msg}</h2>
        {
          this.state.bool ? (<span></span>) : (<span></span>)
        }
        <button onClick={this.changeBool}>切换bool的真假</button>
      </div>
    )
  }
}

1.1.3类式组件的简写方式

import React, { Component } from 'react'

export default class Text extends Component {
  // 类中可以直接写赋值语句
  a = 996
  state = {//给类的自身添加state属性
    msg: '欢迎使用react',
    bool: true
  }
  changeBool = () => {//给类的自身添加方法 ==> 赋值语句+箭头函数 这里面的this就是类的实例对象
    let { bool } = this.state;
    this.setState({
      bool: !bool
    })
  }
  render() {
    console.log(this.a);//996
    return (
      <div>
        <h2>{this.state.msg}</h2>
        {
          this.state.bool ? (<span></span>) : (<span></span>)
        }
        <button onClick={this.changeBool}>切换bool的真假</button>
      </div>
    )
  }
}

函数式组件state


本文链接: http://www.dtmao.cc/news_show_650326.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?