ReactJS入门之组件状态

组件的状态

每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重新渲染页面。

其中，要注意两点：

一： this.state值的设置要在构造参数中完成；

二：要修改this.state的值，需要调用this.setState()完成，不能直接对this.state进行修改； 

下面通过一个案例进行演示，这个案例将实现：通过点击按钮，不断的更新this.state，从而反应到页面中。

import React from 'react';

class List extends React.Component{

    constructor(props){
        super(props);

        this.state = {
            dataList : [1,2,3],
            maxNum : 3
        };
    }

    render(){
        return (
            <div>
                <ul>
                    {
                        this.state.dataList.map((value, index) => {
                            return <li key={index}>{value}</li>
                        })
                    }
                </ul>
                <button onClick={() => {
                    let maxNum = this.state.maxNum + 1;
                    let newArr = [...this.state.dataList, maxNum];

                    this.setState({
                        dataList : newArr,
                        maxNum : maxNum
                    });
                }}>点我</button>
            </div>
        );
    }

}

export default List;

当点击“添加”按钮：

过程分析：