reactjs - react : is accessing the state of children an anti-pattern?

标签 reactjs

我有一个组件需要在某个时刻读取属于其子组件的状态变量。
这个特定的状态变量是否应该移动到父级,并通过回调进行更改?

据我所知,其中一些可能是错误的,这些是将状态转移到父级的优点和缺点:

优点: 这似乎更符合 React 的单向数据流原则。

缺点:父级的其他子级将在状态更改时重新渲染(不是在真实的 DOM 中,但它仍然可能会对性能产生影响)。

这里的最佳实践是什么?

最佳答案

数据流的最佳实践是:

  • 从 parent 到 child :通过 props
  • 从子级到父级:通过处理程序
  • 从不相关的组件到另一个组件:通过消息总线

例如

<Child onEvent={this.handleEvent}>

父级有:

handleEvent: function(dataFromChild) {

}

关于reactjs - react : is accessing the state of children an anti-pattern?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27849319/

相关文章:

javascript - 通用 React/redux 不在状态更新时渲染

javascript - 从 React 组件中按文本选择 DOM 元素

javascript - 按下后退按钮时防止 react 路由器重新加载 API 调用。 react 堆

javascript - React - 当 Prop 改变时改变状态

reactjs - Semantic UI React - Table - 使整行可选择并链接到某处

reactjs - 推送状态数组 React with TypeScript

css - 自定义语义 UI React 字体系列,但找不到 src/site/globals/site.variables 文件来执行此操作。还有别的办法吗?

javascript - 使用 React,渲染具有多个嵌套元素的元素的正确方法是什么?

javascript - React JS 哪个按钮被点击了多少次?

node.js - 如何使用 socket.io 将所有客户端重定向到另一个页面?