React学习：state

1.state是用来控制控件因条件不同而不同状态显示的变量：比如点击登录，登录成功，按钮变成红色。

2.在构造器中，需要指明改状态值得初始值，这个初始值也表明了这个数据的数据类型。在需要更新的地方使用setState方法进行state的更新，在UI显示的地方加以对状态的判断，当state改变，UI会自动进行改变。

3.实例：

import React from 'react'

class TestClick extends React.Component {
    constructor(props) {
        super(props);
        this.state = {clicked: false};
        this.click = this.click.bind(this);

    }

    click() {
        console.log("我被点击了");
        //这是es5的写法
        // this.setState(function (prevState,props){
        //     console.log("点击前"+this.state.clicked);
        //     return  {clicked:!this.state.clicked};
        //
        // });


        //这个是ES6的新语法，=>前表示传的参数，后表示返回值,里面的两个参数是默认带过来的，一个是state一个是props
        this.setState((prevState, props) => ({
            clicked: !(prevState.clicked)
        }), function () {
            console.log("更新完毕")
            console.log("点击后" + this.state.clicked);
        });
    }

//以下是各大生命周期
    //渲染调用前
    componentWillMount() {
    }

    //是否需要更新：这个方法不要乱重写：开始我重写了，一直报这里传的数值是indfine，明明传的boolean
    // shouldComponentUpdate() {
    //     console.log('需要更新');
    // }

    //将要更新
    componentWillUpdate() {
    }

    //已经更新
    componentDidUpdate() {
    }

    //接受到新的prop
    componentWillReceiveProps() {
    }

    //第一次渲染调用后
    componentDidMount() {
        //this.interval=setInterval(()=>this.click(),1000)
    }

    //移除
    componentWillUnmount() {
        clearImmediate(this.interval);
    }

    render() {
        var style = {
            backgroundColor: this.state.clicked ? '#000000' : '#ff0000'
        };
        var text = this.state.clicked ? '开启状态' : '关闭状态';
        console.log(text);
        return (
            <div>
                <button style={style} onClick={this.click}>点我试试</button>
                <p> 是否被打开：{this.state.clicked}  <span>{this.state.clicked ? '开启状态' : '关闭状态'}</span></p>
            </div>
        );
    }
}

export default TestClick;

4.调用方法

在APP.js中加入该view

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import TestClick from "./TestClick";

class App extends Component {

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
          <TestClick/>
      </div>
    );
  }
}


export default App;

5.实际显示效果：点击按钮，下面的文字会显示当前的开关状态，按钮的颜色也会随之变动。