欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React学习:state

程序员文章站 2022-07-03 08:59:32
...

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.实际显示效果:点击按钮,下面的文字会显示当前的开关状态,按钮的颜色也会随之变动。

React学习:state