One is a variable which can refer to JSX. It isn't a component, e.g. doesn't have life cycle of its own. You can use it if it improves readability for you.
Another one is a component. But: declaring component within the function is not recommended (as you did with WarningFunc). Put its definition outside WarningDialog. Reason is reconciliation algorithm. When component is defined within another component, the "constructor" function is different each time because it is recreated, and reconciliation algorithm may think the component type is different each time.
There is basically no affect in performance whether you declare a React functional component with const or function.
But declaring a component with function do have the benefit of hoisting the function to the top of current scope.
I would also suggest putting the "sub-component" outside the current component since "sub-component" is really not a thing.
If you want to detach a part of a large component to make the code clearer, while not making it a child component that have state-wise connection with the current component, put it outside helps you better.
发布评论
评论(2)
他们是不同的事情。
WarningFunc
)。 将其定义放在外面警告dialog
。原因是对帐算法。当组件在另一个组件中定义时,每次都会重新创建“构造函数”函数,并且对帐算法可能会认为每次组件类型都不同。They are different things.
WarningFunc
). Put its definition outsideWarningDialog
. Reason is reconciliation algorithm. When component is defined within another component, the "constructor" function is different each time because it is recreated, and reconciliation algorithm may think the component type is different each time.无论您是用
const
或函数
声明一个反应功能组件,性能基本上都没有影响。但是,用
函数声明组件
确实有利于将功能吊到当前范围的顶部。我还建议将“子组件”放在当前组件之外,因为“子组件”确实不是一回事。
如果您想将大型组件的一部分分离以使代码更清晰,同时又不使其成为与当前组件具有州联系的子组件,则将其放在外面可以帮助您更好。
There is basically no affect in performance whether you declare a React functional component with
const
orfunction
.But declaring a component with
function
do have the benefit of hoisting the function to the top of current scope.I would also suggest putting the "sub-component" outside the current component since "sub-component" is really not a thing.
If you want to detach a part of a large component to make the code clearer, while not making it a child component that have state-wise connection with the current component, put it outside helps you better.