React之state详解_react state

一、概念及特点

state的主要作用是用于组件保存、控制以及修改自己的状态，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

注意：如果直接通过this.state.xxx的方式修改，组件不会重新渲染，但是值会被修改。并且这也是不规范的行为

二、state的定义及使用

1、在constructor中定义state

import React from "react";
 
export default class LearnState extends React.Component {
  constructor() {
    super();
    /**
     * 定义当前组件的state
     * 这个对象里面可以存放任意数据
     */
    this.state = {
      name: '张三'
    };
  }
  render () {
    return (
      <div>
        {/* 
          使用的时候通过this找到state在找到对应要使用的属性
        */}
        <div>{this.state.name}</div>
      </div>
    )
  }
}

2、直接在组件内部定义state

注意：如果在constructor中定义了state，那么会覆盖组件内部直接定义的state，一般来说一个组件只会定义一个state对象，推荐直接在组件内部定义

import React from "react";
 
export default class LearnState extends React.Component {
  /**
   * 也可以直接在组件内部
   */
  state = {
    age: 10
  }
  render () {
    return (
      <div>
        <div>{this.state.age}</div>
      </div>
    )
  }
}

三、修改state

1、setState用法——第一个参数为函数</