反应:钩子会取代 HOC 和渲染道具吗?

Question

从 React Hooks FAQ 中，我们了解到钩子可以取代返回/渲染单个组件的 HOC 和渲染道具。

我试图更好地理解这一点，以及为什么这是一个事实。

让我们先看看 HOC：

HOC 是一个函数，它将组件作为参数，将其包装在周围的逻辑(如效果和状态)中，并返回一个新组件。自定义钩子究竟将如何取代它？我们仍然需要将输入函数与其他逻辑包装在一起的函数。

查看渲染道具：

渲染道具是我们作为道具传递给另一个组件的组件，然后使用一些新道具渲染传递的组件。我想我们可以通过创建一个返回完整组件的自定义钩子来用钩子替换它，然后在任何需要的组件中使用该钩子。因此，父级不必将组件作为道具传递给其子项。这就是钩子取代渲染道具的方式吗？

关于钩子如何在最常见的用例中替换 HOC 和渲染道具的解释(最好是代码示例)，将不胜感激。

Answer 1

HOC 和渲染道具有许多不同的用途，所以我不可能涵盖所有用途，但基本上该段落指出，使用 HOC/渲染道具的许多情况也可以通过钩子来实现。我会说钩子的便利性使它们成为大多数想要共享代码的良好选择，但我不会说它们使 HOC/渲染道具过时。如果您需要代码同时使用类和函数组件，仍然可以使用 HOC/渲染道具;或者，如果您遇到钩子很麻烦的情况，或者您只是更喜欢它们。

HOC/render 道具的一个常见工作是管理某些数据的生命周期，并将该数据传递给派生组件或子组件。在下面的示例中，目标是获取窗口宽度，包括与之相关的状态管理和事件侦听。

临时版本：

function withWindowWidth(BaseComponent) {
class DerivedClass extends React.Component {
state = {
windowWidth: window.innerWidth,
}
onResize = () => {
this.setState({
windowWidth: window.innerWidth,
})
}
componentDidMount() {
window.addEventListener('resize', this.onResize)
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
render() {
return <BaseComponent {...this.props} {...this.state}/>
}
}
// Extra bits like hoisting statics omitted for brevity
return DerivedClass;
}
// To be used like this in some other file:
const MyComponent = (props) => {
return <div>Window width is: {props.windowWidth}</div>
};
export default withWindowWidth(MyComponent);

渲染道具版本：

class WindowWidth extends React.Component {
propTypes = {
children: PropTypes.func.isRequired
}
state = {
windowWidth: window.innerWidth,
}
onResize = () => {
this.setState({
windowWidth: window.innerWidth,
})
}
componentDidMount() {
window.addEventListener('resize', this.onResize)
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
render() {
return this.props.children(this.state.windowWidth);
}
}
// To be used like this:
const MyComponent = () => {
return (
<WindowWidth>
{width => <div>Window width is: {width}</div>}
</WindowWidth>
)
}

最后但并非最不重要的一点是，钩子版本

const useWindowWidth = () => {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [])
return width;
}
// To be used like this:
const MyComponent = () => {
const width = useWindowWidth();
return <div>Window width is: {width}</div>;
}