在 React 中，传递一个相当大的对象更好还是应该只传递对象的必需字段？

Question

假设我有一个从 API 检索数据的函数，并且 API 返回对象数组。每个对象都有很多字段（20 个左右）。现在我只想使用每个对象的“id”和“name”。

使用该映射函数将对象减少为每个字段 2 个字段是否更好，还是按原样传递对象并让 Dropdown 组件自行解构字段会更好？

const SomeComponent () =>{
const [companies, setCompanies] = useState([]);

const fetch =async () => {
await api.get("/companies").then((response) => {
      const rows = response.data.rows;

      const updateCompanies = rows.map((item) => ({
        //extract only name and id of statusLabels
        id: item.id,
        name: item.name,
      }));

      setCompanies(updateCompanies); //set companies
    })
};

useEffect(()=>{
 if(companies.length === 0){
 (async () => await fetch())();
}
},[])


return (
<>
      <Dropdown
        data={companies}
        placeholderStyle={styles.placeholder}
        labelField="name"
        valueField="id"
        placeholder={"Companies"}
        onChange={(item) => {
          setCompanyFilter(item.id);
        }}
        style={styles.inputContainer}
      />
</>

)


}

尝试通过两种方式，但我不知道如何进行基准测试

Answer 1

这要看具体情况。在 js 中，对象是通过引用传递的，因此性能方面没有区别。

您可以在这里阅读更多内容。

Answer 2

传递整个对象数组可能是最好的解决方案，因为它不需要更多的内存或时间，而映射确实需要一些时间来执行。