译文：React 状态提升概念介绍及上手示例

本周我想要分享一下 React.js 中状态提升的知识。在开始介绍状态提升之前，我想先介绍一下 Prop Drilling（属性钻取）的概念。

什么是Prop Drilling ？

那么，什么是状态提升呢？我们都知道 React 中的prop drilling（属性钻取）。prop drilling意味着从父组件向子组件传递一些 props。通过这种方式，我们可以在不同的组件之间共享数据或函数。可以使用 prop 传递任何类型的数据。

在上面的示例代码中，你可以看到，Home 组件具有一个名为 name 的状态，并且她与子组件共用 name 变量。在 React 中，只能将数据从父组件传递到子组件。

什么是 State Lifting

一般来说，状态提升允许你将数据从子组件移动到父组件，与Props Drilling不同，你可以在父组件使用子组件的状态值。这是不是很疯狂？

在 React 生态中，我们知道数据只能从父组件流向子组件，但现在将学习如何让数据反过来流动。

但是，为什么要这么做？

我们可以在父组件中定义状态并将其以 prop 的方式传递给子组件，但是这么做有可能会导致性能损失和代码复杂度提升。在我之前的博客中有提到：保持状态本地化很重要。因为当状态更新时，组件以及该组件的子组件都会重新渲染。

此外对于代码复杂性，对于如 Modal 这样的组件，选择在子组件中声明状态而不是在父组件中声明状态，将能够使代码更易于阅读。使用这种方法，你不必在每个父组件中声明状态。

通常对应用程序中的大多数组件来说，这是不必要的。但是，对于某些类型的组件，特别是可重用组件，会有这种需求。下面描述一下最通用的场景。

多说无用，上代码：

例如，我们有一个常见的 Modal 组件，我们想要在 Modal 中保留可见性状态。当一些组件想要使用这个 Modal 时，通常会定义自己的可见状态，但是通过 State Lifting，这个步骤将不再必要。

在 上面的 Modal 组件中，做了如下操作：

1. 首先，使用forwardRef执行 ref 转发，ref 转发是一种自动将 ref 通过组件传递给子组件的技术。
2. 使用 useState 声明状态以控制Modal组件的展示或隐藏。
3. 使用 React 内置的 useImperativeHandle hook 将属性或者方法暴露出去，这里我们添加了一些数据和函数供父组件使用。现在父组件可以直接调用子组件的show、hide、isVisble这些方法和属性。

那么现在我们想在父组件中使用 Modal 组件，要如何使用 Modal 中的状态呢？

1. 首先使用createRef方法创建一个 ref 对象，并将其传递给 Modal 子组件
2. 使用 ref.current 就可以拿到子组件的isVisble属性以及 show 、 hide 方法

使用起来的确很简单。

查看代码

总结

状态提升对某些类型的组件会非常有用，特别是对于可重用组件。但是如果你是在所有组件中使用状态提升，将会提升代码的复杂度。

所以，谨慎使用！

原文地址

如侵则删。