• 技术文章 >web前端 >前端问答

    为什么react要用专门的组件来渲染列表

    长期闲置长期闲置2022-05-05 10:47:01原创147

    因为react在渲染大型数据集合时,协调器必须评估每个变化的集合所产生的的组件,效率非常低;而使用专门的组件来渲染列表,就可以提高渲染大型数据集合的表现,并且不再渲染其他组件。

    本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

    为什么react要用专门的组件来渲染列表

    在专用组件中渲染列表

    这点在渲染大型数据集合的时候尤为重要。React在渲染大型数据集合时表现的非常差,因为协调器必须评估每个变化的集合所产生的组件。因此,建议使用专门的组件来映射集合(数组)并且渲染这个组件,切不再渲染其他组件:

    不好的:

    class MyComponent extends Component {
        render() {
            const {todos, user} = this.props;
            return (<div>
                {user.name}
                <ul>
                    {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
                </ul>
            </div>)
        }
    }

    在上面例子中,当 user.name 改变时,React 会不必要的协调所有的 TodoView 组件. 尽管TodoView组件不会重新渲染,但是协调的过程本身就非常昂贵.

    好的:

    class MyComponent extends Component {
        render() {
            const {todos, user} = this.props;
            return (<div>
                {user.name}
                <TodosView todos={todos} />
            </div>)
        }
    }
    class TodosView extends Component {
        render() {
            const {todos} = this.props;
            return <ul>
                {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
            </ul>)
        }
    }

    React中的列表渲染

    Vue.js中使用v-for 实现模板中的列表项循环渲染;

    小程序中使用 wx:for 实现模板中的列表项循环渲染;

    React中没有模板(即不需要v-for),也没有指令系统(即没有提供类似的机制)。

    方法1:for循环遍历

    import React, { Component } from 'react'
    export default class App extends Component {
    // 假设服务器端返回如下
    state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
    booklist(){
    // 把服务器端返回的字符串数组转换为JSX数组
    let arr=[]
    for(let i=0;i<this.state.books.length;i++){
    arr.push( <li key={i}>《{this.state.books[i]}》</li> )
    }
    return arr
    }
    render() {
    return (
    <div>
    <ul>
    {this.booklist()}
    </ul>
    </div>
    )
    }
    }

    方法2:创建函数返回映射后的JSX数组

    showList(){
    return   this.state.list.map( (e,i)=>JSX )
    }
    {this.showList() }
    import React, { Component } from 'react'
    export default class App extends Component {
    // 假设服务器端返回如下
    state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
    booklist(){
    // 把服务器端返回的字符串数组转换为JSX数组
    return this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
    }
    render() {
    return (
    <div>
    <ul>
    {this.booklist()}
    </ul>
    </div>
    )
    }
    }

    方法3:直接绑定映射后的JSX数组

    {
    this.state.list.map( (e,i)=>JSX )
    }
    import React, { Component } from 'react'
    export default class App extends Component {
    // 假设服务器端返回如下
    state={books:['巴黎圣母院','悲惨世界','爱的教育','简·爱','钢铁是怎样炼成的','安徒生童话']}
    render() {
    return (
    <div>
    <ul>
    {/*this.booklist()*/}
    {
    /*此处不能急 编写for循环——for不是表达式*/
    this.state.books.map( (b,i)=> <li key={i}>《{b}》</li> )
    }
    </ul>
    </div>
    )
    }
    }

    以上几种方法出来的结果都是一样的,如下图所示

    44444.png

    推荐学习:《react视频教程

    以上就是为什么react要用专门的组件来渲染列表的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react中的switch的用法是什么 下一篇:react性能优化是哪个周期函数
    千万级数据并发解决方案

    相关文章推荐

    • react中canvas的用法是什么• react三种定义组件方法有什么区别• react兼容什么版本的ie• react生命周期分为几个阶段• React不支持less文件怎么办
    1/1

    PHP中文网