为什么我们在比较两个组件相等时需要toJSON？

Question

我编写了组件，该组件将文本与\n断行转换为html段落

Text.js

const Text = props => ((
  <div>
    { props.paragraph.split('\n').map((line, index) => {
      if (line.length === 0) return;
      return <p key={index}>{ line }</p>;
    })}
  </div>
)
);

当我想要与组件进行比较时，如果我不使用toJSON调用它来呈现组件，就会出现错误。(即使当我检查toMatchSnapshot()时，结果是相同的)

Text.spec.js

it('ignores \\n at last', () => {
  const paragraphA = 'aa\nbbb\n';
  const paragraphB = 'aa\nbbb';
  const cA = renderer.create(<Text paragraph={paragraphA} />);
  const cB = renderer.create(<Text paragraph={paragraphB} />);
  expect(cA).toEqual(cB); // NG
  expect(cA.toJSON()).toEqual(cB.toJSON()); // OK
});

开玩笑说出不同之处如下

比较值序列化为相同的结构。打印内部对象结构而不调用toJSON。

我在谷歌上搜索，但没有找到任何关于toJSON的线索

• 我们为什么在这里需要toJSON？
• toJSON一般做什么？
• 在哪里可以找到关于toJSON的参考资料？

环境

反应: 16.1打趣："^21.2.1“

提前谢谢！！

Answer 1

来自精细手册

toJSON behavior 如果一个被字符串化的对象具有一个名为toJSON的属性，其值是一个函数，那么toJSON方法将自定义JSON字符串化行为:而不是被序列化的对象，toJSON方法调用时返回的值将被序列化。

示例：

​

//without toJSON
const a = {
  b: 1
};
console.log(
  JSON.stringify(a)
);

​

​

//with toJSON
const a = {
  b: 1,
  toJSON: () => ({
    c: 100
  })
};
console.log(
  JSON.stringify(a)
);

​

我认为您应该比较cA.toJSON()而不是原始函数cA.toJSON。

为什么有必要？当您比较对象(包括数组和函数)时，它们是通过引用而不是值进行比较的。React组件具有复杂的结构(例如，引用另一个组件作为属性)，因此尝试将其字符串化而不是其.toJSON() (返回安全对象)将引发错误。例如，如果您有解析JSON的自定义函数(不检查.toJSON方法)，它就无法工作。