2

我不明白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>在父组件渲染方法中使用组件时都会调用，所以会被调用多次。

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

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

我initialState举个例子，但也可以对其他生命周期回调说同样的话。

4

1 回答 1

6

据我了解，make每次<Greeting>在父组件渲染方法中使用组件时都会调用，所以会被调用多次。

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

在此示例中，make Inside每次按下按钮时都会在控制台中打印 - 这会导致Inside组件的新渲染。

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

  • <Greeting name="John" />ReasonReact.element(Greeting.make(~name="John", [||]))由原因 ppx转换为。您可以在主要的 Reason repo中找到实现。
  • 在该语句中，您要引用Greeting.make的make函数是每个 ReasonReact 组件必须定义的函数。
  • ReasonReact.element是魔法发生的地方。该函数将调用createElement以下方式（源代码）：
createElement(
  component.reactClassInternal,
  ~props={"key": key, "ref": ref, "reasonProps": element},
  [||]
)
  • element作为 prop 传递的实际上reasonProps是由返回的完整组件“模板” （参见上面几行make的赋值）。
  • component.reactClassInternal指向一个 React 组件，为了简单起见，我将调用它WiringComponent。这WiringComponent实质上是声明所有 React 生命周期方法并通过将实际行为委托给来自用 . 声明的“模板”的函数来实现它们make。这些函数是从reasonProps传递给 this 的道具中挑选出来的WiringComponent。您可以在此处查看此组件的实现。

因此，即使make您提到的每次渲染都调用一次，但实际上正在渲染的内容类似于<WiringComponent reasonProps=Greeting.make(...) />. 然后，当WiringComponent.getInitialState被调用时（像往常一样，每个组件实例只调用一次），它将将该调用委托给Greeting.initialState.

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

这就是代码似乎正在做的事情。解决这个问题对我来说似乎并不简单。鉴于标记参数被用于对组件 props 进行建模，因此无法在make不放弃类型安全的情况下进行记忆，因为此函数可能有许多“风格”（每个组件一个）。

于 2018-02-22T00:45:32.523 回答