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.實際顯示效果：點擊按鈕，下面的文字會顯示當前的開關狀態，按鈕的顏色也會隨之變動。