将状态和函数导入 React 组件

Posted 2023-02-19

【中文标题】将状态和函数导入 React 组件

【英文标题】：Import States and Functions to a React Component

【发布时间】：2022-01-21 23:42:45

【问题描述】：

是否可以在功能性 React 组件上导入状态和函数以使其更简洁？

这是我的代码目前的样子：

import React from 'react'
//more imports...

const Dashboard = () => 

  const [] = useState()
  //more states here..

  const fetch = asycn () => 
    //more code..
  

 //more functions here...

  return (
    <>
    </>
  )

但是，我想知道是否可以将所有状态和函数分开，以便我的反应组件文件看起来像这样：

import React from 'react'
//more imports...
//import states and functions

const Dashboard = () => 
  return (
    <>
    </>
  )

还有其他方法可以导入它以供我使用此组件中的数据吗？ （除了自定义钩子来最小化我的代码）

【问题讨论】：

如果该函数在多个组件中使用，您可以尝试将其变成一个钩子，如果这有意义的话。如果它是一个实用函数，它应该存在于外部。导入和使用函数很简单。但是，状态是另一回事，您不能导入状态定义。如果您想分离逻辑和 JSX，您可以通过将“哑”组件（执行所有渲染）包装在“智能”组件（包含状态和逻辑）中来实现。此外，如果您倾向于拥有巨大的 JSX 块和大量“handleX”函数，请考虑拆分您的组件。

嗨，谢谢。我认为将愚蠢和智能组件分开并将它们分解成如上所述的部分会很棒。您可以将此作为答案发布，以便我接受。再次感谢！

【参考方案1】：

对于复杂的状态和你所描述的 你需要使用redux。 https://redux.js.org/introduction/examples

对于本地和简单状态，useState 是最佳选择

希望我的回答能指导你

【参考方案2】：

你可能想研究一下 Redux， 它用于在全局存储中集中状态，可以在整个应用程序中访问。

但是，您需要使用钩子 useSelector() 来访问状态， 并使用Dispatch() 调度一个新的状态。

你也可以通过父组件的 props 向下传递状态，

const Dashboard = (state, setState) => 
  return (
    <>
    </>
  )

但是，那么父组件会有很多const [state, setState] = useState()