React中列表的作用

2022-01-10 22:02:45 阅读：175 来源： 互联网

标签：调用 return 函数 render 列表 React movies state 作用

<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

标签：调用,return,函数,render,列表,React,movies,state,作用
来源： https://www.cnblogs.com/lpx520/p/15786104.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React中列表的作用