{"action":"created","issue":{"url":"https://api.github.com/repos/RubyLouvre/anu/issues/97","repository_url":"https://api.github.com/repos/RubyLouvre/anu","labels_url":"https://api.github.com/repos/RubyLouvre/anu/issues/97/labels{/name}","comments_url":"https://api.github.com/repos/RubyLouvre/anu/issues/97/comments","events_url":"https://api.github.com/repos/RubyLouvre/anu/issues/97/events","html_url":"https://github.com/RubyLouvre/anu/issues/97","id":303014128,"number":97,"title":"children的hash化","user":{"login":"RubyLouvre","id":190846,"avatar_url":"https://avatars3.githubusercontent.com/u/190846?v=4","gravatar_id":"","url":"https://api.github.com/users/RubyLouvre","html_url":"https://github.com/RubyLouvre","followers_url":"https://api.github.com/users/RubyLouvre/followers","following_url":"https://api.github.com/users/RubyLouvre/following{/other_user}","gists_url":"https://api.github.com/users/RubyLouvre/gists{/gist_id}","starred_url":"https://api.github.com/users/RubyLouvre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RubyLouvre/subscriptions","organizations_url":"https://api.github.com/users/RubyLouvre/orgs","repos_url":"https://api.github.com/users/RubyLouvre/repos","events_url":"https://api.github.com/users/RubyLouvre/events{/privacy}","received_events_url":"https://api.github.com/users/RubyLouvre/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-03-07T08:59:40Z","updated_at":"2018-03-08T07:41:43Z","closed_at":null,"author_association":"OWNER","body":"新旧虚拟DOM的children在diff时，会转换成两个hash，然后进行比较。\r\n\r\n这个哈希化的过程举例如下：\r\n\r\n```jsx\r\n const ops = [];\r\n    \r\n class Stateful extends React.Component {\r\n    componentDidUpdate() {\r\n        ops.push(\"Update Stateful\");\r\n    }\r\n\r\n    render() {\r\n        return <div>Hello</div>;\r\n    }\r\n}\r\n   \r\nfunction Foo({condition}) {\r\n    return <div><span>111</span><span>222</span><span>333</span>}</div>\r\n}\r\n\r\nReactDOM.render(<Foo condition={true} />,div);\r\n```\r\nFoo的div的children为三个span元素，它们都没有key，因此会转换为以下对象：\r\n![image](https://user-images.githubusercontent.com/190846/37082443-8bc93d9e-2227-11e8-80e2-85eb29088987.png)\r\n\r\n\r\n对象的键名是非常重要，它不能是纯数字（纯数字会在for in循环中优先被遍历出来，而我们要求那个属性先加上去就先遍历出来），于是在数字前加上\".\"\r\n\r\n如果有key的情况则会变成这样\r\n```jsx\r\nfunction Foo({condition}) {\r\n    return <div><span>111</span><span key=\"xxx\">222</span><span>333</span>}</div>\r\n}\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/190846/37082596-df317adc-2227-11e8-9910-fab0ca6f12da.png)\r\n\r\n上面的JSX又相当于\r\n```jsx\r\nfunction Foo({condition}) {\r\n    return <div>{[<span>111</span>,<span key=\"xxx\">222</span>,<span>333</span>]}</div>\r\n}\r\n```\r\n在React16.2又出现一个Fragment对象，它的行为就相当于一个数组，因为在JSX写数组比较麻烦，它可以帮你删掉一些中括号与逗号\r\n```jsx\r\nfunction Foo({condition}) {\r\n    return <div><React.Fragment><span>111</span><span key=\"xxx\">222</span><span>333</span></React.Fragment></div>\r\n}\r\n```\r\n但这样写，看不出优势，于是babel推出其语法糖\r\n```jsx\r\nfunction Foo({condition}) {\r\n    return <div><><span>111</span><span key=\"xxx\">222</span><span>333</span></></div>\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/RubyLouvre/anu/issues/comments/371406093","html_url":"https://github.com/RubyLouvre/anu/issues/97#issuecomment-371406093","issue_url":"https://api.github.com/repos/RubyLouvre/anu/issues/97","id":371406093,"user":{"login":"RubyLouvre","id":190846,"avatar_url":"https://avatars3.githubusercontent.com/u/190846?v=4","gravatar_id":"","url":"https://api.github.com/users/RubyLouvre","html_url":"https://github.com/RubyLouvre","followers_url":"https://api.github.com/users/RubyLouvre/followers","following_url":"https://api.github.com/users/RubyLouvre/following{/other_user}","gists_url":"https://api.github.com/users/RubyLouvre/gists{/gist_id}","starred_url":"https://api.github.com/users/RubyLouvre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RubyLouvre/subscriptions","organizations_url":"https://api.github.com/users/RubyLouvre/orgs","repos_url":"https://api.github.com/users/RubyLouvre/repos","events_url":"https://api.github.com/users/RubyLouvre/events{/privacy}","received_events_url":"https://api.github.com/users/RubyLouvre/received_events","type":"User","site_admin":false},"created_at":"2018-03-08T07:41:43Z","updated_at":"2018-03-08T07:41:43Z","author_association":"OWNER","body":"```jsx\r\nfunction Foo({condition}) {\r\n          return  <div>\r\n              <React.Fragment key=\"c\"> \r\n                <span>foo</span> \r\n                <div key=\"b\">\r\n                  <Stateful key=\"a\" />\r\n                </div>\r\n              </React.Fragment>\r\n              <span>boop</span>\r\n            </div>\r\n}\r\n```\r\n这个Foo组件的div的有三个孩子，分别是span, div[key=b], span, 其中前两个是放一个Fragment组件，Fragment相当一个数组，因此会扁平化操作。生成如下_children对象(通过`src/createElement/fiberizeChildren方法`)\r\n```\r\n{\r\n  \".$c:0\": <span />,\r\n  \".$c:$b\": <div key=\"b\" />,\r\n  \".1\":<span />\r\n}\r\n```\r\n\r\n"}}
{"actor":{"display_login":"RubyLouvre"}}