<h2>
                    <ul>
                            {
                                this.state.movies.map((item,index)=>{
                                    return <li>{item}</li>
                                })
                            }
                    </ul>
                    <button onClick={e=>this.insertMovie()}>添加电影</button>
                </h2>

点击按钮往前面添加数据

insertMovie(){
        // this.setState({
        //     movies:[...this.state.movies,'大话西游']
        // })
        this.setState({
            movies:['大话西游',...this.state.movies]
        })
    }

 

优化调用一个事件多次调用render函数（类组件）

shouldComponentUpdate(nextProps,nextState){   //这个函数的两个参数，一个是新的传过来的props，另外一个是新的state数据
        if(this.state.counter !== nextState.counter){  //如果这个数据不等于心动state就调用当前render函数
            return true
        }   
        return false      //其他render函数一律不调用
    }

以上方法比较繁琐

另一种方法：将Component改成PureComponent