React: 状态提升 (lifting state up)

小公鸡卡哇伊呀~

于 2022-01-08 20:20:27 发布

阅读量457

点赞数

文章标签： React 组件通信状态提升 props 数据流动

本文链接：https://blog.csdn.net/ftell/article/details/122385479

版权

如下的例子：

// App.js
  return (
    <div>
      <NewExpense onAddExpense={addExpenseHandler} />
      <Expenses expenses={expenses} />
    </div>
  );

NewExpense 生成数据，Expenses 使用数据。但是 NewExpense 不能直接将数据传递给 Expenses，因此 NewExpense 向上传递数据给它们的公共父组件 App，然后由 App 传递给 Expenses：
在这里插入图片描述
组件之间的通信方向只能向上或者向下，所以兄弟组件之间无法直接通信。状态提升是React 的一个概念，意思是说，将数据从子组件移动到某个父组件以在那里使用它或然后将其传递给其他某个子组件。
父组件不一定要求是主组件App，为了实现组件之间通信，需要沿组件树传递 state，或者说提升state 到必要的高度，直到某个组件能获得数据，或者两个组件拥有共同的父组件。
props 的传递不能跳过中间的组件，只能一级一级传递。