常规 javascript 函数和 React 函数之间的区别

Question

根据 React，我们可以从 React 函数调用钩子，而不是从常规 Javascript 函数调用。

但他们两者有什么区别呢？

从这篇文章来看，似乎没有什么区别，只是写作方式不同。

请提供一个例子以更清楚地说明差异。

Answer 1

React 函数是Javascript 函数，有一些特殊的规则。

\n

反应函数：

\n

\n

就是这样。

\n

const MyComponent = (props) => <div>{props.greeting}</div>;\n

用法：

\n

<MyComponent greeting="Hello World!" />\n

永不MyComponent({ greeting: "Hello World!" });

\n

这是因为 React 框架获取此组件引用并将其转换为常规的旧 Javascript 函数，并管理为您调用此函数。React 管理组件生命周期。

\n

与其他答案相反，普通的 Javascript 函数可以返回 JSX。请参阅渲染元素。您可以将 JSX 文字分配给变量，或调用返回 JSX 文字的 Javascript 函数。

\n

例子：

\n

const getGreeting = (name) => <div>Hello, {name}!</div>;\n\nconst MyComponent = (props) => <div>{getGreeting(props.name)}</div>;\n

用法：

\n

<MyComponent name="Drew" /> // --> <div>Hello, Drew!</div>\n

类似地，React hooks 也只是Javascript 函数，但同样应用了特殊的规则。您可以阅读这些Hook 规则。

\n

\n

这些只是 React 团队决定的规则，目的是使 React hooks 的使用变得易于管理，并在 React 组件生命周期内工作并保持理智。

\n