React-组件state和setState()（react组件特性）

1、state的基本使用

• 状态( state )即数据,是组件内部的私有数据,只能在组件内部使用
• state的值是对象,表示-个组件中可以有多个数据

class Hello extends React.Comporent{
    constructor() {
        super()
        //初始化state
            this.state = {
            count: 0
            }
    }
    render() (
      return (
        <div>有状态组件</div>
      )
    }
}

class Hello extends React .Component (
//简化语法
    state= {
        count: 0
      }
      render() {
          return (
            <div>有状态组件</div>
          }
		}
}

• 状态即数据
• 状态是私有的,只能在组件内部使用
• 通过this.state 来获取状态

class Hello extends React .Component (
//简化语法
    state= {
        count: 0
      }
      render() {
          return (
            <div>有状态组件 ： {this.state.count}</div>
          }
		}
}

2、setState()修改状态

• 状态是可变的
• 语法: this.setState({要修改的数据))
• 注意:不要直接修改state中的值。这是错误的
• setState0作用: 1.修改state 2.更新UI
• 思想:数据驱动视图

补充：从JSX中抽离事件处理程序

• JSX中掺杂过多JS逻辑代码,会显得非常混乱
• 推荐:将逻辑抽离到单独的方法中,保证JSX结构清晰

如果抽离后报错：

• 原因:事件处理程序中this的值为undefined
• 希望: this指向组件实例( render方法中的this即为组件实例)