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