无状态组件中的函数? [英] Functions in stateless components?
问题描述
我正在尝试转换我发现的这个很酷的 <canvas> 动画 此处 转换为 React 可重用组件.看起来这个组件需要一个用于画布的父组件，以及用于函数 Ball() 的许多子组件.
I'm trying to convert this cool <canvas> animation I found here into a React reusable component. It looks like this component would require one parent component for the canvas, and many children components for the function Ball().
出于性能原因，最好将 Balls 变成无状态组件，因为它们会很多.我对制作无状态组件不太熟悉，想知道应该在哪里定义 this.update() 和 this.draw 函数，这些函数是在 function 中定义的Ball().
For performance reasons it would probably be better to make the Balls into stateless components as there will be many of them. I'm not as familiar with making stateless components and was wondering where I should define the this.update() and this.draw functions that are defined in function Ball().
无状态组件的函数是在组件内部还是外部?换句话说，以下哪个更好?
Do functions for stateless components go inside the component or outside? In other words, which of the following is better?
1:
const Ball = (props) => {
const update = () => {
...
}
const draw = () => {
...
}
return (
...
);
}
2:
function update() {
...
}
function draw() {
...
}
const Ball = (props) => {
return (
...
);
}
每种方法的优缺点是什么?其中一种更适合我的特定用例吗?
What are the pros/cons of each and are one of them better for specific use cases such as mine?
推荐答案
首先要注意的是无状态功能组件不能有方法，你不应该指望调用 update 或 draw 在渲染的 Ball 上，如果它是一个无状态的功能组件.
First thing to note is that stateless functional components cannot have methods, you shouldn't count on calling update or draw on a rendered Ball if it is a stateless functional component.
在大多数情况下，您应该在组件函数之外声明函数，以便您只声明一次并始终重用相同的引用.当你在里面声明函数时，每次渲染组件都会重新定义函数.
In most cases you should declare the functions outside of the component function so you declare them only once and always reuse the same reference. When you declare the function inside, every time the component is rendered the function will be defined again.
在某些情况下，您需要在组件内部定义一个函数，例如，将其分配为一个事件处理程序，该处理程序的行为会根据组件的属性而有所不同.但是您仍然可以在 Ball 之外定义函数并将其与属性绑定，从而使代码更简洁并使 update 或 draw 函数可重用.
There are cases in which you will need to define a function inside the component to, for example, assign it as an event handler that behaves differently based on the properties of the component. But still you could define the function outside Ball and bind it with the properties, making the code much cleaner and making the update or draw functions reusable.
// You can use update somewhere else
const update (propX, a, b) => { ... };
const Ball = props => (
<Something onClick={update.bind(null, props.x)} />
);
如果您使用 hooks，您可以使用 useCallback 来确保该函数仅在其依赖项之一 (props.x> 在这种情况下)更改:
If you're using hooks, you can use useCallback to ensure the function is only redefined when one of its dependencies (props.x in this case) changes:
const Ball = props => {
const onClick = useCallback((a, b) => {
// do something with a, b and props.x
}, [props.x]);
return (
<Something onClick={onClick} />
);
}
这是错误的方式:
const Ball = props => {
function update(a, b) {
// props.x is visible here
}
return (
<Something onClick={update} />
);
}
当使用 useCallback 时，在 useCallback 钩子中定义 update 函数本身我们在组件外部成为一个设计决策，你应该考虑是否要重用 update 和/或是否需要访问组件闭包的范围，例如，读/写状态.我个人选择默认在组件内部定义它，并仅在需要时才使其可重用，以防止从一开始就过度设计.最重要的是，使用更具体的钩子可以更好地重用应用程序逻辑，将组件留作展示用途.在使用钩子的同时在组件外定义函数实际上取决于您希望应用逻辑与 React 的解耦程度.
When using useCallback, defining the update function in the useCallback hook itself our outside the component becomes a design decision more than anything, you should take into account if you're going to reuse update and/or if you need to access the scope of the component's closure to, for example, read/write to the state. Personally I choose to define it inside the component by default and make it reusable only if the need arises, to prevent over-engineering from the start. On top of that reusing application logic is better done with more specific hooks, leaving components for presentational purposes. Defining the function outside the component while using hooks really depends on the grade of decoupling from React you want for your application logic.
这篇关于无状态组件中的函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
