Javascript 为什么传递给构造函数的数组与类不同步？

我认为您可以通过引用而不是值来访问属性，这是保持同步所必需的

我有一个元素，我正在传递一个引用数组。当I console.log（）引用时，它是一个空数组。但如果我将console.log（）放在控制器中，我可以看到它是一个引用数组

因此，每次单击（我看到此输出）：

---

JavaScript数组和对象是Java意义上的引用，而不是C/C++意义上的引用。这意味着“reference”是“reference value”的缩写，其行为类似于指针。所以在这一行：

this.itemRefs = this.generateRefs(children);

您正在使用不同的指针重新指定

itemRefs

reference值/指针，但

controlscocontroller

仍具有指向原始空数组的相同指针

---

由于这是react，并且您正在处理状态更改，因此似乎应该将itemRefs作为状态的一部分，然后在render中创建ControlsController。这样，当状态更改时，react将自动执行正确的操作。

谢谢-如果在每个渲染上实例化ControlsController，性能影响是否很大？我计划保持translate3d（state.X）处于状态，然后稍后将其传递给style={{transform:

translate3d（0，state.X，0）}

}，并希望平滑滑动。这取决于ControlsController在其构造函数中实际执行的操作。但我敢打赌，不，这不会对性能产生高影响。在状态更改时，请记住，react已经在计算一个新的虚拟dom并更新真实dom。我猜你的控制器将是整个计划中的一个小亮点。但是如果您愿意，您可以只更新它的引用，而不是重新实例化ControlsController<代码>渲染（）{controlsController.items=this.state.itemRefs；..

class Controller extends React.Component<ControllerProps, ControllerState> {
  public state = {
    startIndex: 0,
    endIndex: 6,
    tempTestProp: ""
  };

  public itemRefs: Array<React.RefObject<HTMLLIElement | {}>> = [];

  public generateRefs = memoize((children) => {
    return Array.from({
      ......
    }).map((_, index) => React.createRef());
  });

  public controlsController = new ControlsController({
    element: this,
    list: this.listRef,
    items: this.itemRefs <------ here
  });

  public render() {
    ...........

     .........

    this.itemRefs = this.generateRefs(children);

    return render({
      ......
      itemRefs: this.itemRefs as Array<React.RefObject<HTMLLIElement>>,
      .......
    });
  }

  private handleControlClick = (direction: string) => (
    event: React.MouseEvent<HTMLButtonElement>
  ) => {
    console.log(this.itemRefs) // [ {..}, {..} .. ]
    this.controlsController.move(event, direction);
  };
}

class ControlsController {

  constructor({ ..., items, ... }: ConstructorProps) {
    .....
    this.items = items;
    ....
  }
public move( ... ) {
    switch (direction) {
      case "next":
        return moveNext.call(this);
    }
  }


function moveNext(this: ControlsControllerInterface) {
  console.log(this.items); // []
}

this.itemRefs = this.generateRefs(children);