React中的State hoisting与lifting the state是否为同一概念？

二者是React开发中完全相同的技术概念，没有任何区别。

• State hoisting 是React官方对该模式的标准英文术语，其中文官方标准译法就是「状态提升」，也就是你描述的「将状态向上移动至公共祖先组件」的操作。
• 该模式的核心使用场景是：当多个同级/嵌套的后代组件需要共享同一份状态、同步状态变更时，将原本散落在各子组件内部的状态，移动到它们最近的公共祖先组件统一管理，再通过props将状态值、状态修改方法向下传递给所有需要用到该状态的后代组件。

举个常见的使用示例：

假设你开发了一个表单，包含两个联动的输入框：修改第一个输入框的内容时第二个输入框同步更新，反之亦然。这时就可以把两个输入框的value状态提到共同的父组件管理，分别给两个输入框传递对应的value和onChange回调，这个操作就是典型的State hoisting/状态提升。

最简实现代码参考：

import { useState } from 'react'

// 公共祖先组件
function LinkageForm() {
  // 状态提升到公共祖先统一管理
  const [inputValue, setInputValue] = useState('')
  return (
    <>
      {/* 将状态和修改方法通过props透传给子组件 */}
      <InputItem label="输入框A" value={inputValue} onChange={setInputValue} />
      <InputItem label="输入框B" value={inputValue} onChange={setInputValue} />
    </>
  )
}

// 子组件
function InputItem({ label, value, onChange }) {
  return (
    <div>
      <span>{label}：</span>
      <input value={value} onChange={e => onChange(e.target.value)} />
    </div>
  )
}

额外注意：React的State hoisting和JavaScript语法层面的*变量提升（variable hoisting）*是完全无关的两个概念，不要混淆。

内容的提问来源于stack exchange，提问作者Matt Nann