爲什麼我們在比較兩個組件的等式時需要使用JSON？

我寫這些文字轉換與\ n換行符到HTML段落組成爲什麼我們在比較兩個組件的等式時需要使用JSON？

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的參考？

的Env

反應：16.1 開玩笑-CLI「：」^ 21.2.1「

預先感謝!!

來源

2017-11-18 Kan Uchida

從fine manual：

toJSON行爲

如果正在字符串化的對象具有一個名爲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方法，則它將不起作用。

來源

2017-11-18 01:58:01 reski

感謝您的詳細評論！我不知道是否有必要。但是，我沒有toJSON遇到以下錯誤。 > - 「_debugID」：17， > +「_debugID」：9，因此，我認爲我不能只比較兩個組件。然後我開玩笑說文檔。幾乎每次它通過調用toJSON（）方法呈現組件進行測試。所以我認爲這可以解決我的問題，實際上它似乎是解決問題。我發現'npm test'沒有錯誤請問我是否對這個想法有任何誤解？ –

@KanUchida是的，你說得對。茉莉花測試適用於對象，但不適用於參考。即使它們具有相同的結構（但是分配在內存中的其他位置）。總是在React組件上調用.toJSON（）方法來獲取安全的對象字面值 - 不需要這些引用。 – reski

我懂了！非常感謝！我深深地感謝你：D –

爲什麼我們在比較兩個組件的等式時需要使用JSON？

回答

相關問題