javascript - 在 React 组件中传递字符串化对象作为 prop 比普通 JavaScript 对象更好吗？

Question

只是我关心的，我知道当 Prop 改变时，组件将被重新渲染。React 无法对传递给 props 的新旧对象进行深度比较所以:

{ key: 'value' }和{ key: 'value' }总是不同并导致重新渲染。

像这样将对象传递给 Prop 怎么样:

<Component smth={JSON.stringify({ key: 'value' })}/>

它是一个字符串，因此 React 可以有效地比较新旧内容？

Answer 1

string 是原始类型，因此 "a"== "a"//true 是的，如果通过 JSON.stringify() 将它们转换为字符串，它就会获胜只要对象结构保持不变，就不会触发重新渲染。顺便说一句，这是一种反模式 - 您不应该比较 stringify 版本。 (信用@DennisVash)

但是对象是引用类型；所以 {} == {}//false 但如果您存储对象引用并将其传递给 Prop ，它不会在渲染中发生变化，也不会每次都触发重新渲染；这是功能组件中将 obj 引用保持在本地状态的示例；

//!! it can be placed outside the component and wont change in recurring renders; 
//!! it will work; but definitely not recommended;
// let obj = { key: 'value'} 

function FancyComponent() {
  const [obj, setObj] = useState({ key: 'value'});

  // optionally you may store it in ref, in some special use-cases
  // const ref = useRef({ key: "value" });

  render(){
    // let obj = { key: 'value'} //!! no it won't work here credits to @EmileBergeron
    return <>
      <Component smth={obj}/>
    </>
  }
}

console.log("a" == "a"); //true
console.log({} == {}); //false
let obj = {};
console.log(obj == {}); //false
console.log(obj == obj); //true