javascript 组件选项板自定义挂钩

vtwuwzda 于 2022-11-27 发布在 Java

关注(0)|答案(3)|浏览(186)

bounty将在2天后过期。回答此问题可获得+50的声望奖励。Sachin希望吸引更多人关注此问题：解释为什么这种导入方式更好，推荐的导入方式是什么，为什么？

我对React还是个新手，仍然对custom-hooks感到困惑。我看到了一段代码，其中创建了一个自定义钩子来处理组件导入。
useComponentPalette.js

import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'

const defaultComponents = {
TodoEditor,
TodoItem,
TodoList,
CheckBox
}

export function useComponentPalette(){
return defaultComponents
}

为了使用钩子，

const {TodoItem, TodoList, Checkbox } = useComponentPalette()

**我的问题：-**这种方法是否比组件中的常规导入有任何优势？或者这是一种反模式？

我通常如何导入组件如下

import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'

function App(){
return(
<>
<TodoList/>
</>
)
}

JavaScript

来源：https://stackoverflow.com/questions/74434980/component-palette-custom-hook

3条答案

按热度按时间

wfsdck301#

这不是一个好主意，使用React挂钩像这样，你可以得到同样的结果没有React挂钩

// first file name.js
import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'

export default {
TodoEditor,
TodoItem,
TodoList,
CheckBox
}
//component file

import * as Component form 'first file name'; 
//<Component.TodoEditor/>
//or
import {TodoEditor} form 'first file name';

赞(0）回复(0）举报 2022-11-27

lp0sw83n2#

我使用react-hooks的方式是为了让我的代码更枯燥，增加它的可读性，所以react-hooks不太适合这种用法。

赞(0）回复(0）举报 2022-11-27

apeeds0o3#

你好
在我的选择中，ReactJS使用钩子来管理在组件之间重用有状态逻辑。换句话说，钩子在封装状态和共享逻辑方面做得很好。如果你想用这些组件做一些有状态逻辑或基于条件的逻辑，那么这是可以的。但是如果你在给定的组件中使用没有条件的逻辑。那么，这对于制作自定义钩子是无用的。你可以用一种更简单的方式在没有自定义钩子的情况下做到这一点。
这里有一个简单的方法来做到这一点：-
在components文件夹中。我创建索引文件，这是我所有导出组件的入口点