函数组合、React组件和React hooks

2 年 ago
雅, 悟
1 minute

刚开始

React受到喜爱的原因之一是因为它可以像普通函数一样编写。React的函数组件可以像函数一样进行合成。React hooks也是普通函数，因此可以进行合成。我想通过简单的例子来解释，这样可能更容易理解，下面我来写一下。

常规的JavaScript

如果没有函数（只需一个选择），可以如下所示。


const main = (args) => {
  const a = args[0] * 2;
  const b = args[1] * 2;
  console.log([a, b]);
  return a + b;
};

函数可以用于增加可重复使用性。

const double = (x) => x * 2;

const main = (args) => {
  const a = double(args[0]);
  const b = double(args[1]);
  console.log([a, b]);
  return a + b;
};

此外，即使只使用一次的函数，为了使其名称更易读，有时也会将其函数化。

const double = (x) => x * 2;
const printForDebug = (x) => console.log(x);

const main = (args) => {
  const a = double(args[0]);
  const b = double(args[1]);
  printForDebug([a, b]);
  return a + b;
};

這只是一個簡單的例子，這是普通的JavaScript情境。

React组件

React组件可以被编写成返回React节点的函数。由于通常使用JSX编写，因此可以按照以下示例进行编写。

const App = () => {
  return (
    <div>
      <h1>Hello</h1>
      <h2>World</h2>
    </div>
  );
};

将此分割为函数并进行组合，可以按如下方式编写。

const Title = () => <h1>Hello</h1>;
const Subtitle = () => <h2>World</h2>;

const App = () => {
  return (
    <div>
      {Title()}
      {Subtitle()}
    </div>
  );
};

这将产生完全相同的结果。因为它只是一个函数。

然而，这种模式可能很少见，而且实际上是不推荐的。推荐的写法应该是这样的。

const Title = () => <h1>Hello</h1>;
const Subtitle = () => <h2>World</h2>;

const App = () => {
  return (
    <div>
      <Title />
      <Subtitle />
    </div>
  );
};

这种写法可能被认为是眼熟的。这是因为React可以控制调用Title和Subtitle函数的时机，所以推荐使用这种写法。

 

bannerAds