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

Question

我编写的组件将带有\n 换行符的文本转换为 html 段落

文本.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() 检查时结果相同)

文本.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
});

开 Jest 说区别如下

Compared values serialize to the same structure. Printing internal object structure without calling toJSON instead.

我用谷歌搜索但找不到任何关于 toJSON 的线索

• 这里为什么需要toJSON？
• toJSON 通常做什么？
• 我在哪里可以找到有关 toJSON 的引用资料？

环境

react :16.1开 Jest -cli": "^21.2.1"

提前致谢!

Answer 1

来自fine manual :

toJSON behavior

If an object being stringified has a property named toJSON whose value is a function, then the toJSON method customizes JSON stringification behavior: instead of the object being serialized, the value returned by the toJSON method when called will be serialized.

例子:

//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() (返回安全对象)会引发错误。例如，如果您有用于解析不检查 .toJSON 方法的 JSON 的自定义函数，它将无法工作。