ocaml - 创建和分配不必要的回调(initialState...)？

Question

我不懂路make工作:

let component = ReasonReact.reducerComponent("Greeting");

let make = (~name, _children) => {
  ...component,
  initialState: () => 0, /* here, state is an `int` */
  render: (self) => {
    let greeting =
      "Hello " ++ name ++ ". You've clicked the button " ++ string_of_int(self.state) ++ " time(s)!";
    <div>{ReasonReact.stringToElement(greeting)}</div>
  }
};

据我了解，make每次<Greeting>都会被调用组件在父组件的render方法中使用，因此会被多次调用。

但这也意味着组件记录将创建多次 initialState功能对吗？

我不明白分配initialState有什么意义每次我们创建 React 元素时都会调用一些函数，而它只会在元素被挂载时调用，并且不会影响更新。

我拿initialState作为一个例子，但也可以对其他生命周期回调说同样的事情。

Answer 1

As far as I understand, make will be called every time the <Greeting> component is used in a parent component render method, so it will be called multiple times.

是的，make每次渲染都会调用。

In this example , make Inside每次按下按钮时都会在控制台中打印 - 这会导致 Inside 的新渲染组件。

我很想更好地理解为什么会发生这种情况，所以在这里分享它以防其他人觉得有趣。目前的实现方式大致如下:

• <Greeting name="John" />转换为ReasonReact.element(Greeting.make(~name="John", [||]))按原因 ppx。您可以找到实现in the main Reason repo 。
• 在该声明中，Greeting.make是make您正在引用的函数，每个 ReasonReact 组件都必须定义相同的函数。
• ReasonReact.element这就是魔法发生的地方。该函数将调用createElement以下方式(source code):

createElement(
  component.reactClassInternal,
  ~props={"key": key, "ref": ref, "reasonProps": element},
  [||]
)

• element作为 prop reasonProps 传递实际上是 make 返回的完整组件"template" (参见作业a few lines above)。
• component.reactClassInternal指向我将调用的 React 组件 WiringComponent为了简单起见。这是什么WiringComponent本质上就是声明所有 React 生命周期方法，并通过将实际行为委托(delegate)给来自用 make 声明的"template"的函数来实现它们。 。这些函数选自reasonProps传递给此 WiringComponent 的 prop 。可以看到这个组件的实现here .

所以，即使make正如您提到的，每次渲染都会调用一次，实际上渲染的内容类似于 <WiringComponent reasonProps=Greeting.make(...) /> 。然后，当 WiringComponent.getInitialState被调用(像往常一样，每个组件实例只调用一次)，it will delegate that call to Greeting.initialState .

But this also means the component record will create multiple times the initialState function right?

这就是代码似乎正在做的事情。解决这个问题对我来说似乎并不是一件小事。鉴于带标签的参数用于对组件 props 进行建模，因此无法内存 make不放弃类型安全，因为这个函数可以有很多“风格”(每个组件一个)。