问普通javascript函数和React函数的区别

EN

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

反应职能：

1. 遵循React组件命名约定，即它们必须资本化。
2. 接受一个props对象参数
3. 返回有效的JSX
4. React函数是从未调用过的。传递对它们的引用，或者将它们引用为作为JSX。

仅此而已。

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

用法：

<MyComponent greeting="Hello World!" />

从来没有MyComponent({ greeting: "Hello World!" });

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

与另一个答案相反，普通的Javascript函数可以返回JSX。见渲染元素。可以将JSX文字分配给变量，也可以调用返回JSX文字的Javascript函数。

示例：

const getGreeting = (name) => <div>Hello, {name}!</div>;

const MyComponent = (props) => <div>{getGreeting(props.name)}</div>;

用法：

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

类似地，React钩子也只是Javascript函数，但也有特殊的规则应用于它们。你可以读到这些钩子规则。

1. React钩子遵循使用use-前缀的命名约定
2. 只在顶层调用钩子()。不要在循环、条件或嵌套函数中调用钩子。
3. 只从调用钩子。不要从常规的JavaScript函数调用钩子。
4. 可以在自定义反应钩子中调用。

这些只是由React决定的规则，以使使用和使用React成为可管理的，并在生命周期内工作，并保持您的理智。