一、详细解释
React 高阶组件(Higher-Order Components)、Render Props 和 Hooks 是用来复用组件逻辑的三种不同方式。它们各有优缺点,并且随着时间的推移,React 社区不断迭代以提供更简洁和强大的方式来实现组件逻辑的复用。下面我们分别介绍这三种方式,并结合代码案例进行讲解。
1. 高阶组件(Higher-Order Components, HOC)
高阶组件是一个函数,接收一个组件并返回一个新的组件。HOC 主要用于逻辑复用和代码重用。
案例:
import React from 'react';
// 一个简单的高阶组件,用于提供窗口大小的信息
const withWindowSize = (WrappedComponent) => {
return class extends React.Component {
state = {
width: window.innerWidth,
height: window.innerHeight,
};
handleResize = () => {
this.setState({
width: window.innerWidth,
height: window.innerHeight,
});
};
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
return <WrappedComponent {...this.props} windowSize={this.state} />;
}
};
};
// 使用高阶组件
const MyComponent = ({ windowSize }) => (
<div>
Width: {windowSize.width}, Height: {windowSize.height}
</div>
);
export default withWindowSize(MyComponent);
2. Render Props
Render Props 是一种通过一个返回 React 元素的函数来共享代码的技术。该函数可以作为一个 prop 传递给组件。
案例:
import React from 'react';
// 定义一个使用 render prop 的组件
class WindowSize extends React.Component {
state = {
width: window.innerWidth,
height: window.innerHeight,
};
handleResize = () => {
this.setState({
width: window.innerWidth,
height: window.innerHeight,
});
};
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
return this.props.render(this.state);
}
}
// 使用 render prop
const MyComponent = () => (
<WindowSize render={({ width, height }) => (
<div>
Width: {width}, Height: {height}
</div>
)} />
);
export default MyComponent;
3. Hooks
Hooks 是 React 16.8 引入的一种新的 API,用于在函数组件中使用 state 和其他 React 特性。Hooks 使得函数组件能够拥有更强大的功能,并且代码更加简洁。
案例:
import React, { useState, useEffect } from 'react';
// 使用 hooks 实现窗口大小的监听
const useWindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return windowSize;
};
// 使用自定义 hook
const MyComponent = () => {
const windowSize = useWindowSize();
return (
<div>
Width: {windowSize.width}, Height: {windowSize.height}
</div>
);
};
export default MyComponent;
迭代原因
-
代码复用性和可读性:高阶组件和 Render Props 允许我们复用逻辑,但会导致“嵌套地狱”(nested hell)和较复杂的代码结构。Hooks 提供了更简单和直观的方式来复用逻辑。
-
性能优化:HOC 和 Render Props 可能会导致额外的组件层次和重新渲染问题。Hooks 直接在函数组件内部管理状态和副作用,减少了不必要的渲染和性能开销。
-
社区需求:React 社区不断提出改进建议,Hooks 是在大量实践和反馈的基础上提出的,它解决了很多开发者在实际项目中遇到的问题。
通过这三种方式,我们可以更好地理解 React 如何不断进化以满足开发者的需求,并提供更强大的工具来构建复杂的应用。
二、总结
三者都是用来解决代码复用问题
高阶组件:
- 定义:是一个函数,参数是组件,返回值是一个新组件。(HOC 是纯函数,没有副作用。
- 优点:实现代码复用
- 缺点:
- 传递进来的props可能和被包裹组件原来的props重名,发生冲突
react props:
- 定义:是一个函数,用来告诉组件需要渲染的内容是什么,返回值是react元素
- 优点:实现代码复用,数据共享
- 缺点:
- 嵌套地狱
- 无法在return语句外访问数据
Hooks
- 定义:react新特性
- 优点:
- 在不用class情况下,也可以使用state和react的其他新特性
- 解决了React 高阶组件、Render props的问题
在大部分场景下,Hook 足够了,并且能够帮助减少嵌套。