React state&setState()

React State & setState()

• 函数组件：无状态（无 state）组件，即主要负责数据展示–>静
• class组件：有状态（有 state）组件，即主要负责更新 UI–>动
• 状态 即 数据
• state的值是对象{}，且为私有对象

01 基本用法

import React, {
      Component } from 'react';

class learnState extends Component {
     
  // 在constructor中若需要获取到props ，就必须要在constructor和super的参数里面写上props
  // 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。
  constructor(props) {
     
    // 必须必
    super(props);
    // 初始化state
    this.state = {
     
      count: 0,
    };
  }

export default learnState;

02 简化用法

import React, {
      Component } from 'react';

class learnState extends Component {
     
  // 简化写法
  state = {
     
    count: 0,
  };

export default learnState;

03 获取状态

this.state.属性名;
// 方式 1 直接调
const countTest = this.state.count;
// 方式 2 解构
const {
      count } = this.state;

04 关于 setState()

• 不要直接修改 State

1. 错误示范：下面的代码不会重新渲染组件：

this.state.text = 'Hello';

2. 正确示范：应该使用setState()。（注意：构造函数是唯一可以给 this.state 赋值的地方！）

this.setState({
      text: 'Hello' });

• State 的更新可能是异步的

出于性能考虑，React 可能会把多个setState()调用合并成一个调用。因为this.props和this.state可能会异步更新，所以你不要依赖他们的值来更新下一个状态

• State 的更新会被合并

当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

05 事件处理程序

• 解决事件绑定this指向：
  1. 在事件处理的地方直接使用箭头函数（this 指向外部环境）
  2. es5 中的 bind 方法，将 this 与实例绑定，即在constructor()里进行绑定，eg：this.onClick=this.onClick.bind(this)
  3. 利用箭头函数的 class 实例方法（推荐）

import React, {
      Component } from 'react';

class learnState extends Component {
     
  constructor(props) {
     
    // 必须必
    super(props);
    // 初始化state
    this.state = {
     
      count: 0,
    };
  }

  // 事件处理程序中的this为undefined，所以直接用箭头函数能够很好的解决
  onClickByCount = (count) => {
     
    console.log(this);
    count++;
    // 修改state，更新ui----数据驱动视图
    this.setState({
      count });
    // 上面的命令等效于this.setState({ count:count });
  };

  onClick = () => {
     
    const {
      count } = this.state;
    count++;
    // 修改state，更新ui----数据驱动视图
    this.setState({
      count });
    // 上面的命令等效于this.setState({ count:count });
  };

  render() {
     
    // 从state里解构出来count
    const {
      count } = this.state;
    return (
      <>
        // 直接给事件传count值
        <div onClick={
     () => this.onClickByCount(count)}>计数器01：{
     count}</div>
        // 不给事件传值，直接在事件处理程序中获取state里面的值
        <div onClick={
     () => this.onClick()}>计数器02：{
     count}</div>
      </>
    );
  }
}

export default learnState;