react 如何继承
在 React 中，继承并不是推荐的设计模式，因为 React 更倾向于组合（Composition）而非继承（Inheritance）。但若需实现类似继承的功能，可通过以下方式实现：
使用高阶组件（HOC）
高阶组件是一种将组件作为参数并返回新组件的函数，可用于逻辑复用。例如，创建一个通用的数据加载逻辑：
function withDataLoading(WrappedComponent) {
return class extends React.Component {
state = { data: null, loading: true };
componentDidMount() {
fetchData().then(data => this.setState({ data, loading: false }));
}
render() {
return <WrappedComponent {...this.props} {...this.state} />;
}
};
}
// 使用
class MyComponent extends React.Component {
render() {
const { data, loading } = this.props;
return loading ? <div>Loading...</div> : <div>{data}</div>;
}
}
export default withDataLoading(MyComponent);使用自定义 Hook
React 16.8 引入的 Hook 可以更灵活地复用逻辑，无需嵌套组件：
function useDataLoading() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchData().then(data => {
setData(data);
setLoading(false);
});
}, []);
return { data, loading };
}
// 使用
function MyComponent() {
const { data, loading } = useDataLoading();
return loading ? <div>Loading...</div> : <div>{data}</div>;
}通过 Props 组合
直接通过 props 传递组件或数据，实现父子组件的组合：
function ParentComponent({ children }) {
const sharedData = "Shared Data";
return <div>{React.cloneElement(children, { sharedData })}</div>;
}
function ChildComponent({ sharedData }) {
return <div>{sharedData}</div>;
}
// 使用
<ParentComponent>
<ChildComponent />
</ParentComponent>类组件的继承（不推荐）
虽然 React 允许类组件继承，但官方文档明确建议避免：
class BaseComponent extends React.Component {
baseMethod() {
console.log("Base method");
}
}
class DerivedComponent extends BaseComponent {
render() {
this.baseMethod();
return <div>Derived Component</div>;
}
}关键注意事项
- 组合优于继承：React 官方推荐使用组合模式（如 HOC、Hook、Props）实现代码复用。
- Hook 的局限性：自定义 Hook 只能在函数组件中使用，类组件需通过其他方式复用逻辑。
- 性能影响：高阶组件可能引入额外的渲染层级，需谨慎使用。
以上方法可根据具体场景选择，但组合模式通常是更符合 React 设计理念的解决方案。
