{"action":"created","comment":{"url":"https://api.github.com/repos/facebook/react/pulls/comments/82498588","pull_request_review_id":3404929,"id":82498588,"diff_hunk":"@@ -0,0 +1,161 @@\n+---\n+id: composition-vs-inheritance\n+title: Composition vs Inheritance\n+permalink: docs/composition-vs-inheritance.html\n+prev: state-and-lifecycle.html\n+---\n+\n+React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.\n+\n+In this section, we will consider a few examples where developers new to React often reach for inheritance, and show how composition solves the same problem more elegantly.\n+\n+## Containment\n+\n+Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic \"boxes\".\n+\n+We recommend that such components include a prop called `children` in their output:\n+\n+```js{4}\n+function FancyBorder(props) {\n+  return (\n+    <div className={'FancyBorder FancyBorder-' + props.color}>\n+      {props.children}\n+    </div>\n+  );\n+}\n+```\n+\n+This lets other components pass arbitrary children to them by nesting the JSX:\n+\n+```js{4-9}\n+function WelcomeDialog(props) {\n+  return (\n+    <FancyBorder color=\"blue\">\n+      <h1 className=\"Dialog-title\">\n+        Welcome\n+      </h1>\n+      <p className=\"Dialog-message\">\n+        Thank you for visiting our spacecraft!\n+      </p>\n+    </FancyBorder>\n+  );\n+}\n+```\n+\n+Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.\n+\n+While this is less common, sometimes you might need multiple \"holes\" in a component. In such cases you may come up with your own convention instead of using `children`:\n+\n+```js{5,8,18,21}\n+function SplitPane(props) {\n+  return (\n+    <div className=\"SplitPane\">\n+      <div className=\"SplitPane-left\">\n+        {props.left}\n+      </div>\n+      <div className=\"SplitPane-right\">\n+        {props.right}\n+      </div>\n+    </div>\n+  );\n+}\n+\n+function App() {\n+  return (\n+    <SplitPane\n+      left={\n+        <Contacts />\n+      }\n+      right={\n+        <Chat />\n+      } />\n+  );\n+}\n+```\n+\n+React elements like `<Contacts />` and `<Chat />` are just objects, so you can pass them as props like any other data.\n+\n+## Specialization\n+\n+Sometimes we think about components as being \"special cases\" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`.\n+\n+In React, this is also achieved by composition, where a more \"specific\" component renders a more \"generic\" one, and configures it with props:\n+\n+```js{5,8,16-18}\n+function Dialog(props) {\n+  return (\n+    <FancyBorder color=\"blue\">\n+      <h1 className=\"Dialog-title\">\n+        {props.title}\n+      </h1>\n+      <p className=\"Dialog-message\">\n+        {props.message}\n+      </p>\n+    </FancyBorder>\n+  );\n+}\n+\n+function WelcomeDialog(props) {\n+  return (\n+    <Dialog\n+      title=\"Welcome\"\n+      message=\"Thank you for visiting our spacecraft!\" />\n+  );\n+}\n+```\n+\n+Class components also use composition in React:\n+\n+```js{10,27-31}\n+function Dialog(props) {\n+  return (\n+    <FancyBorder color=\"blue\">\n+      <h1 className=\"Dialog-title\">\n+        {props.title}\n+      </h1>\n+      <p className=\"Dialog-message\">\n+        {props.message}\n+      </p>\n+      {props.children}\n+    </FancyBorder>\n+  );\n+}\n+\n+class SignUpDialog extends React.Component {\n+  constructor(props) {\n+    super(props);\n+    this.handleChange = this.handleChange.bind(this);\n+    this.handleSignUp = this.handleSignUp.bind(this);\n+    this.state = {login: ''};\n+  }\n+\n+  render() {\n+    return (\n+      <Dialog title=\"Mars Exploration Program\"\n+              message=\"How should we refer to you?\">\n+        <input value={this.state.login}\n+               onChange={this.handleChange} />\n+        <button onClick={this.handleSignUp}>\n+          Sign Me Up!\n+        </button>\n+      </Dialog>\n+    );\n+  }\n+\n+  handleChange(e) {\n+    this.setState({login: e.target.value});\n+  }\n+\n+  handleSignUp() {\n+    alert(`Welcome aboard, ${this.state.login}!`);\n+  }\n+}\n+```\n+\n+## So What About Inheritance?\n+\n+At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.\n+\n+Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.\n+\n+If you want to reuse some common functionality between components that is not related to the UI, we suggest extracting it into a plain JavaScript module, and importing and using that module from the components.","path":"docs/docs/composition-vs-inheritance.md","position":161,"original_position":161,"commit_id":"e1633577df9c13fc8e6467e1fe89b3972ae5bf58","original_commit_id":"e1633577df9c13fc8e6467e1fe89b3972ae5bf58","user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"body":"👍 ","created_at":"2016-10-08T08:33:14Z","updated_at":"2016-10-08T08:33:14Z","html_url":"https://github.com/facebook/react/pull/7920#discussion_r82498588","pull_request_url":"https://api.github.com/repos/facebook/react/pulls/7920","_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/comments/82498588"},"html":{"href":"https://github.com/facebook/react/pull/7920#discussion_r82498588"},"pull_request":{"href":"https://api.github.com/repos/facebook/react/pulls/7920"}}},"pull_request":{"url":"https://api.github.com/repos/facebook/react/pulls/7920","id":88524228,"html_url":"https://github.com/facebook/react/pull/7920","diff_url":"https://github.com/facebook/react/pull/7920.diff","patch_url":"https://github.com/facebook/react/pull/7920.patch","issue_url":"https://api.github.com/repos/facebook/react/issues/7920","number":7920,"state":"open","locked":false,"title":"Composition vs Inheritance","user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"body":"This is the last \"Basics\" guide I planned to write.\r\n\r\n![fireshot capture 8 - composition vs inheritance - react_ - http___localhost_4000_react_docs_co](https://cloud.githubusercontent.com/assets/810438/19208342/dd263c96-8cf0-11e6-8c25-578ecc4b0b8c.png)\r\n","created_at":"2016-10-07T23:48:34Z","updated_at":"2016-10-08T08:33:14Z","closed_at":null,"merged_at":null,"merge_commit_sha":"b5530417ce63ca82efedf0f34eab1c3881003241","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/facebook/react/pulls/7920/commits","review_comments_url":"https://api.github.com/repos/facebook/react/pulls/7920/comments","review_comment_url":"https://api.github.com/repos/facebook/react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/facebook/react/issues/7920/comments","statuses_url":"https://api.github.com/repos/facebook/react/statuses/e1633577df9c13fc8e6467e1fe89b3972ae5bf58","head":{"label":"gaearon:composition-over-inheritance","ref":"composition-over-inheritance","sha":"e1633577df9c13fc8e6467e1fe89b3972ae5bf58","user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"repo":{"id":48588721,"name":"react","full_name":"gaearon/react","owner":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/gaearon/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":true,"url":"https://api.github.com/repos/gaearon/react","forks_url":"https://api.github.com/repos/gaearon/react/forks","keys_url":"https://api.github.com/repos/gaearon/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/gaearon/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/gaearon/react/teams","hooks_url":"https://api.github.com/repos/gaearon/react/hooks","issue_events_url":"https://api.github.com/repos/gaearon/react/issues/events{/number}","events_url":"https://api.github.com/repos/gaearon/react/events","assignees_url":"https://api.github.com/repos/gaearon/react/assignees{/user}","branches_url":"https://api.github.com/repos/gaearon/react/branches{/branch}","tags_url":"https://api.github.com/repos/gaearon/react/tags","blobs_url":"https://api.github.com/repos/gaearon/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/gaearon/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/gaearon/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/gaearon/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/gaearon/react/statuses/{sha}","languages_url":"https://api.github.com/repos/gaearon/react/languages","stargazers_url":"https://api.github.com/repos/gaearon/react/stargazers","contributors_url":"https://api.github.com/repos/gaearon/react/contributors","subscribers_url":"https://api.github.com/repos/gaearon/react/subscribers","subscription_url":"https://api.github.com/repos/gaearon/react/subscription","commits_url":"https://api.github.com/repos/gaearon/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/gaearon/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/gaearon/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/gaearon/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/gaearon/react/contents/{+path}","compare_url":"https://api.github.com/repos/gaearon/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/gaearon/react/merges","archive_url":"https://api.github.com/repos/gaearon/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/gaearon/react/downloads","issues_url":"https://api.github.com/repos/gaearon/react/issues{/number}","pulls_url":"https://api.github.com/repos/gaearon/react/pulls{/number}","milestones_url":"https://api.github.com/repos/gaearon/react/milestones{/number}","notifications_url":"https://api.github.com/repos/gaearon/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/gaearon/react/labels{/name}","releases_url":"https://api.github.com/repos/gaearon/react/releases{/id}","deployments_url":"https://api.github.com/repos/gaearon/react/deployments","created_at":"2015-12-25T18:49:24Z","updated_at":"2016-08-25T11:42:34Z","pushed_at":"2016-10-07T23:46:58Z","git_url":"git://github.com/gaearon/react.git","ssh_url":"git@github.com:gaearon/react.git","clone_url":"https://github.com/gaearon/react.git","svn_url":"https://github.com/gaearon/react","homepage":"https://facebook.github.io/react/","size":88930,"stargazers_count":7,"watchers_count":7,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":2,"mirror_url":null,"open_issues_count":0,"forks":2,"open_issues":0,"watchers":7,"default_branch":"master"}},"base":{"label":"facebook:new-docs","ref":"new-docs","sha":"20434b2e308456fc63f573864d32e023fb5ce1c4","user":{"login":"facebook","id":69631,"avatar_url":"https://avatars.githubusercontent.com/u/69631?v=3","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"repo":{"id":10270250,"name":"react","full_name":"facebook/react","owner":{"login":"facebook","id":69631,"avatar_url":"https://avatars.githubusercontent.com/u/69631?v=3","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/facebook/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":false,"url":"https://api.github.com/repos/facebook/react","forks_url":"https://api.github.com/repos/facebook/react/forks","keys_url":"https://api.github.com/repos/facebook/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/facebook/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/facebook/react/teams","hooks_url":"https://api.github.com/repos/facebook/react/hooks","issue_events_url":"https://api.github.com/repos/facebook/react/issues/events{/number}","events_url":"https://api.github.com/repos/facebook/react/events","assignees_url":"https://api.github.com/repos/facebook/react/assignees{/user}","branches_url":"https://api.github.com/repos/facebook/react/branches{/branch}","tags_url":"https://api.github.com/repos/facebook/react/tags","blobs_url":"https://api.github.com/repos/facebook/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/facebook/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/facebook/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/facebook/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/facebook/react/statuses/{sha}","languages_url":"https://api.github.com/repos/facebook/react/languages","stargazers_url":"https://api.github.com/repos/facebook/react/stargazers","contributors_url":"https://api.github.com/repos/facebook/react/contributors","subscribers_url":"https://api.github.com/repos/facebook/react/subscribers","subscription_url":"https://api.github.com/repos/facebook/react/subscription","commits_url":"https://api.github.com/repos/facebook/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/facebook/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/facebook/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/facebook/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/facebook/react/contents/{+path}","compare_url":"https://api.github.com/repos/facebook/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/facebook/react/merges","archive_url":"https://api.github.com/repos/facebook/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/facebook/react/downloads","issues_url":"https://api.github.com/repos/facebook/react/issues{/number}","pulls_url":"https://api.github.com/repos/facebook/react/pulls{/number}","milestones_url":"https://api.github.com/repos/facebook/react/milestones{/number}","notifications_url":"https://api.github.com/repos/facebook/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/facebook/react/labels{/name}","releases_url":"https://api.github.com/repos/facebook/react/releases{/id}","deployments_url":"https://api.github.com/repos/facebook/react/deployments","created_at":"2013-05-24T16:15:54Z","updated_at":"2016-10-08T08:11:20Z","pushed_at":"2016-10-07T23:48:34Z","git_url":"git://github.com/facebook/react.git","ssh_url":"git@github.com:facebook/react.git","clone_url":"https://github.com/facebook/react.git","svn_url":"https://github.com/facebook/react","homepage":"https://facebook.github.io/react/","size":136877,"stargazers_count":51236,"watchers_count":51236,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":8941,"mirror_url":null,"open_issues_count":701,"forks":8941,"open_issues":701,"watchers":51236,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/7920"},"html":{"href":"https://github.com/facebook/react/pull/7920"},"issue":{"href":"https://api.github.com/repos/facebook/react/issues/7920"},"comments":{"href":"https://api.github.com/repos/facebook/react/issues/7920/comments"},"review_comments":{"href":"https://api.github.com/repos/facebook/react/pulls/7920/comments"},"review_comment":{"href":"https://api.github.com/repos/facebook/react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/facebook/react/pulls/7920/commits"},"statuses":{"href":"https://api.github.com/repos/facebook/react/statuses/e1633577df9c13fc8e6467e1fe89b3972ae5bf58"}}}}
{"actor":{"display_login":"gaearon"}}