React渲染列表并修改其中某项数据

最新推荐文章于 2024-02-25 17:01:56 发布

大名张无忌

最新推荐文章于 2024-02-25 17:01:56 发布

阅读量2.8k

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_40029828/article/details/106202455

版权

这篇博客探讨了在React中如何渲染列表并修改其中某个条目的数据。通过创建一个展示人员信息的Persons组件，文章讲解了函数组件的使用、如何避免状态复用、在事件处理中直接调用父组件的函数、深拷贝JSON对象以防止引用问题、提高性能的bind技巧以及setState函数的使用。此外，还讨论了数组map函数的参数和对象属性覆盖的规则。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    功能：一个Persons组件列表，有3个人，每个人有name和age两个属性。有一个input框，输入值时对应的任的age发生变化。
知识点：
 1、因为每个Person中会有复用代码，如render的return值，所以抽象成一个函数组件；
 2、函数组件与类组件：
 函数组件—无状态组件，没法使用state。更简单，其中没有this，接受参数返回值即可，无构造函数
 更多见：https://www.jianshu.com/p/e220ef5b0e09
 3、函数组件与高阶组件：
 函数：传入一些参数，返回DOM元素；高阶组件：传入一个组件，返回一个组件。
 4、无需再Person里面写一个函数，用以调用父组件的函数，直接onChange的时候调用父组件的函数即可，注意要把需要的参数传递。
 5、JSON变量是引用变量，指向一个地址。所以如果想复制一个JSON变量，需要先把它变成字符串，再变成JSON格式，就会生成一个内容一样但是地址不一样的新变量。 JSON.parse(JSON.stringify(JSON变量))
 这种方法昨天在哪里报错来着？？？
 6、提高性能的话，不在具体渲染的时候每次进行函数的bind(this)，可以在构造函数中bind，那就只用bind一次即可
 7、setState函数，传入一个state变量，返回一个state变量
 8、newPersons[index][“age”]=newPersons[index].age，两种用法都可以
 9、数组的map函数不止该数组项i

                