{"action":"created","issue":{"url":"https://api.github.com/repos/ckinmind/ReactCollect/issues/20","repository_url":"https://api.github.com/repos/ckinmind/ReactCollect","labels_url":"https://api.github.com/repos/ckinmind/ReactCollect/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/ckinmind/ReactCollect/issues/20/comments","events_url":"https://api.github.com/repos/ckinmind/ReactCollect/issues/20/events","html_url":"https://github.com/ckinmind/ReactCollect/issues/20","id":200267916,"number":20,"title":"关于react无状态组件(函数式组件)","user":{"login":"ckinmind","id":8199343,"avatar_url":"https://avatars.githubusercontent.com/u/8199343?v=3","gravatar_id":"","url":"https://api.github.com/users/ckinmind","html_url":"https://github.com/ckinmind","followers_url":"https://api.github.com/users/ckinmind/followers","following_url":"https://api.github.com/users/ckinmind/following{/other_user}","gists_url":"https://api.github.com/users/ckinmind/gists{/gist_id}","starred_url":"https://api.github.com/users/ckinmind/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ckinmind/subscriptions","organizations_url":"https://api.github.com/users/ckinmind/orgs","repos_url":"https://api.github.com/users/ckinmind/repos","events_url":"https://api.github.com/users/ckinmind/events{/privacy}","received_events_url":"https://api.github.com/users/ckinmind/received_events","type":"User","site_admin":false},"labels":[{"id":516030215,"url":"https://api.github.com/repos/ckinmind/ReactCollect/labels/%E5%BE%85%E5%A4%84%E7%90%86","name":"待处理","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-01-12T03:10:37Z","updated_at":"2017-01-14T08:48:45Z","closed_at":null,"body":"参考资料1：[掌握这5大核心概念，你就理解了React](https://zhuanlan.zhihu.com/p/24833815?refer=icode)\r\n\r\n参考资料2：[React 中函数式声明组件](http://www.tuicool.com/articles/2iiM3uj)"},"comment":{"url":"https://api.github.com/repos/ckinmind/ReactCollect/issues/comments/272611205","html_url":"https://github.com/ckinmind/ReactCollect/issues/20#issuecomment-272611205","issue_url":"https://api.github.com/repos/ckinmind/ReactCollect/issues/20","id":272611205,"user":{"login":"ckinmind","id":8199343,"avatar_url":"https://avatars.githubusercontent.com/u/8199343?v=3","gravatar_id":"","url":"https://api.github.com/users/ckinmind","html_url":"https://github.com/ckinmind","followers_url":"https://api.github.com/users/ckinmind/followers","following_url":"https://api.github.com/users/ckinmind/following{/other_user}","gists_url":"https://api.github.com/users/ckinmind/gists{/gist_id}","starred_url":"https://api.github.com/users/ckinmind/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ckinmind/subscriptions","organizations_url":"https://api.github.com/users/ckinmind/orgs","repos_url":"https://api.github.com/users/ckinmind/repos","events_url":"https://api.github.com/users/ckinmind/events{/privacy}","received_events_url":"https://api.github.com/users/ckinmind/received_events","type":"User","site_admin":false},"created_at":"2017-01-14T08:48:45Z","updated_at":"2017-01-14T08:48:45Z","body":"函数式组件与基于Class声明的组件相比，其具有以下特性\r\n- 不需要声明类，可以避免大量的譬如extends或者constructor这样的代码\r\n- 不需要显示声明this关键字，在ES6的类声明中往往需要将函数的this关键字绑定到当前作用域，而因为函数式声明的特性，我们不需要再强制绑定\r\n\r\n写法：\r\n```js\r\n//es5\r\nclass Text extends React.Component {\r\n  render() {\r\n    return <p>{this.props.children}</p>;\r\n  }\r\n}\r\n\r\n//函数式声明组件\r\nconst Text = (props) =>\r\n  <p>{props.children}</p>;\r\n```\r\n>函数式声明组件可以不用绑定this\r\n\r\n这种无状态函数式组件的写法也是支持设置默认的Props类型与值的\r\n```js\r\nconst Text = ({ children }) => \r\n  <p>{children}</p>\r\nText.propTypes = { children: React.PropTypes.string };\r\nText.defaultProps = { children: 'Hello World!' };\r\n```\r\n\r\n另外，在无状态的组件函数中，我们也是可以访问Context的\r\n```js\r\nconst Text = (props, context) =>\r\n  <p style={context}>props.children</p>;\r\nText.contextTypes = {\r\n  fontFamily: React.PropTypes.string\r\n};\r\nclass App extends React.Component {\r\n  static childContextTypes = {\r\n    fontFamily: React.PropTypes.string\r\n  }\r\n  getChildContext() {\r\n    return {\r\n      fontFamily: 'Helvetica Neue'\r\n    };\r\n  }\r\n  render() {\r\n    return <Text>Hello World</Text>;\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"ckinmind"}}