make和不必要的回调创建和分配(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>在父组件渲染方法中使用组件时都会调用它,因此它将被多次调用.

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

我不明白initialState每次创建React元素时分配一些函数是有意义的,而只有在元素被挂载时才会调用它,并且对更新没有影响.

我initialState举一个例子,但也可以对其他生命周期回调也一样.

Answer 1

据我所知,make每次<Greeting>在父组件渲染方法中使用组件时都会调用它,因此它将被多次调用.

是的,make每次渲染都会调用.

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

我很想知道为什么会发生这种情况,所以在这里分享它以防其他人发现它有趣.今天实施的方式大致如下:

• <Greeting name="John" />被ReasonReact.element(Greeting.make(~name="John", [||]))原因ppx 转化为.您可以在主要原因仓库中找到实施.
• 在该声明中,Greeting.make就是make你要,每个ReasonReact组件必须定义相同的功能做参考作用.
• ReasonReact.element是魔术发生的地方.此函数将调用createElement以下方式(源代码):

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

• 在element作为道具传递reasonProps实际上是完整的组件"模板"是由返回make(见分配上面几行).
• component.reactClassInternal指向一个React组件,我将WiringComponent简单地调用它.这WiringComponent实际上是通过将实际行为委托给来自声明的"模板"的函数来声明所有React生命周期方法并实现它们make.这些函数是从reasonProps传递给它的prop 中选取的WiringComponent.您可以在此处查看此组件的实现.

所以,即使make你提到的每个渲染都被调用一次,实际上渲染的东西也是如此<WiringComponent reasonProps=Greeting.make(...) />.然后,当WiringComponent.getInitialState被调用时(每个组件实例只需要一次),它将委托该调用Greeting.initialState.

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

这就是代码似乎正在做的事情.解决这个问题对我来说似乎并不重要.鉴于标记的参数被用于对组件道具进行建模,因此make无需放弃类型安全就无法进行记忆,因为此函数可能有许多"风格"(每个组件一个).