React 组件为什么不推荐继承?

Question

写代码时候想到 React 组件可不可以继承,查了一下资料确实是可以继承,但是大部分人都说不推荐继承,请问原因是什么呢?

Answer 1

主要考虑的还是代码质量的问题，如果2个组件本身业务比较复杂，做成继承的方式，就很不好，当你在看子组件的时候，你还要去父组件里看，react希望你一个组件只专注于一件事。
因此，我建议如果是抽象类的话可以做成继承，如果是2个实际都会被使用到的组件的话，尽量不要去用继承的方式，而是拆分成更小的组件，用fb推荐的高阶组件的方式去做。

Answer 2

可以看看这篇文章Composition vs Inheritance

大体来说，不过是组合更适合react的风格，因为react是基于组件的。而且整个react社区也是以组合为主，与社区保持统一的好处很多。

当然，继承也是可以用，但是在没有绝对的好处的情况下用继承显然不是个明智的选择。

Answer 3

这个和你在面向对象编程时，组合优于继承的原因是一样的。组合具有更好的灵活性和扩展性，你要多编写一些代码后，才能真正体会到这里面的好处。

Answer 4

可以参考官网文档：https://facebook.github.io/re...

Answer 5

如果公用的东西，是一些方法，可以 使用 React 的 Mixins（ES5） ，高阶组件（ES6）【高阶函数不太了解，如何使用，去找下资料 】
但是如果有公用的属性，那么就有点 力不从心了
在想，React 中，是否可用继承 自定义的组件？
经过一番查找资料，发现，React 是可以 继承 自己定义的组件的
二、解决方案
实现的步骤很简单，只需要 把
classWin extends React.Component
替换成
classWin extends BaseWin

1. 例子代码
   importReact from 'react'

/**

• 所有弹框的基类
  */

classBaseWin extends React.Component{
constructor(props){
super(props);
this.name ='zhongxia';
this.state ={};
}
common(){
alert('this is a common function!')
}
}
exportdefaultBaseWin;
importReact from 'react'
importBaseWin from './baseWindow'
classWin extends BaseWin{
constructor(props){
super(props);
this.state ={
...this.props
};
console.log(this.name);
this.common();
}
getData(){
returnthis.state;
}
render(){
this.state.node.model.set({name:'zhongxia', age:17})
return(
<div className="pop-dialog">
<h2>弹框1</h2>
<form>
<label htmlFor="">用户名：</label><input value={this.state.name} type="text"/>
<label htmlFor="">密码：</label><input type="password" value={this.state.password}/>
</form>
</div>
);
}
}
exportdefaultWin;

1. 实例化 React 组件的顺序 和效果图
   实例化子类组件 ==》 构造函数里面 super(prop)的时候去实例化 父类组件 ==》 父类组件实例化结束 ==》 子类组件实例化结束
2. 子类构造函数
3. super(props) 实例化父类
4. 子类构造函数结束，已经可以拿到父类的属性和方法
5. 子类实例开始渲染页面