React组件显示标签数组

如下代码, 会将数据源数组中的数据, 以列表的形式展示出来

<script type="text/babel">
    class Item extends React.Component{
        constructor(...args){
            super(...args);
        }
        render() {
            return <li>{this.props.value}</li>
        }
    }

    class StudentsList extends React.Component{
        constructor(...args){
            super(...args);
            this.students = ["小明","小红","小鹿"];
        }
        
        //点击增加按钮,将输入框中的姓名添加入数据源数组
        addStudent(ev){
            let stuentInput = document.getElementById("stuentInput");
            let name = stuentInput.value;
            if(name.length>0){
                console.log("增加新同学:",name);
                this.students.push(name);
                console.log("现在的同学有:",this.students);
            }else{
                console.log("没有输入姓名");
            }
        }

        render(){
            //将li标签存入数组, 通过对数据源的遍历对li赋值. 组件可以将这个标签数组进行显示
            let items = this.students.map((name,index)=>{
                return <Item key={index} value={name}/>;   //key react会根据key唯一识别重复元素, 已存在没有更改的元素将不会重新创建,以此提供其运行性能
            });

            return <div>
                <ul>
                    {items}
                </ul>
                <input type="text" id="stuentInput"/>
                <input type="button" value="增加新同学" onClick={this.addStudent.bind(this)}/>
                </div>
        }
    }
    let div1 = document.getElementById("div1");
    ReactDOM.render(
        <StudentsList/>,
        div1
    );

</script>

效果1.png

运行效果如图, 数据源通过列表显示出来.
但是当我们通过文本框向数据源数组中增加新的元素时, 页面是没有变化的. 这是因为我们的数据源时放在属性中的. 属性发生变化时, UI不会更新

将数据源存放在状态state中

我们这次将数据源存放在state中, 当我们再次通过输入框将新元素进入数组, UI自动更新了. 效果如图:

效果2.png

代码如下:

<script type="text/babel">
    class Item extends React.Component{
        constructor(...args){
            super(...args);
        }
        render() {
            return <li>{this.props.value}</li>
        }
    }

    class StudentsList2 extends React.Component{
        constructor(...args){
            super(...args);
            this.state = {
                students:["小明","小红","小鹿"]
            }
        }
        
        //点击增加按钮,将输入框中的姓名添加入数据源数组
        addStudent(ev){
            let stuentInput = document.getElementById("stuentInput2");
            let name = stuentInput.value;
            if(name.length>0){
                console.log("增加新同学:",name);
                this.setState({
                    students : [...this.state.students,name]
                });
                console.log("现在的同学有:",this.state.students);
            }else{
                console.log("没有输入姓名");
            }
        }

        render(){
            let items = this.state.students.map((name,index)=>{
                return <Item key={index} value={name}/>;   //key react会根据key唯一识别重复元素, 已存在没有更改的元素将不会重新创建,以此提供其运行性能
            });

            return <div>
                <ul>
                    {items}
                </ul>
                <input type="text" id="stuentInput2"/>
                <input type="button" value="增加新同学" onClick={this.addStudent.bind(this)}/>
                </div>
        }
    }
    let div2 = document.getElementById("div2");
    ReactDOM.render(
        <StudentsList2/>,
        div2
    );

</script>