React.js中的合成与继承

组合和继承是在React.js中一起使用多个组件的方法。这有助于代码重用。React建议尽可能使用组合而不是继承，并且仅在非常特殊的情况下才应使用继承。

理解它的例子-

假设我们有一个输入用户名的组件。

继承

class UserNameForm extends React.Component {
   render() {
      return (
         <div>
            <input type="text" />
         </div>
      );
   }
}
ReactDOM.render(
   < UserNameForm />,
   document.getElementById('root'));

这个sis很简单，只需输入名称即可。我们将有两个组件来创建和更新用户名字段。

使用继承，我们将像-

class UserNameForm extends React.Component {
   render() {
      return (
         <div>
            <input type="text" />
         </div>
      );
   }
}
class CreateUserName extends UserNameForm {
   render() {
      const parent = super.render();
      return (
         <div>
            {parent}
            <button>Create</button>
         </div>
      )
   }
}
class UpdateUserName extends UserNameForm {
   render() {
      const parent = super.render();
      return (
         <div>
            {parent}
            <button>Update</button>
         </div>
      )
   }
}
ReactDOM.render(
   (<div>
      < CreateUserName />
      < UpdateUserName />
   </div>), document.getElementById('root')
);

我们扩展了UserNameForm组件，并使用super.render()将其方法提取到子组件中。

组成

class UserNameForm extends React.Component {
   render() {
      return (
         <div>
            <input type="text" />
         </div>
      );
   }
}
class CreateUserName extends React.Component {
   render() {
      return (
         <div>
            < UserNameForm />
            <button>Create</button>
         </div>
      )
   }
}
class UpdateUserName extends React.Component {
   render() {
      return (
         <div>
            < UserNameForm />
            <button>Update</button>
         </div>
      )
   }
}
ReactDOM.render(
   (<div>
      <CreateUserName />
      <UpdateUserName />
   </div>), document.getElementById('root')
);

使用组合比继承更简单，并且易于维护复杂性。