Question

我搞砸了ag-grid，react-apollo，一切似乎都工作正常。目的是单击一个复选框，并在修改某些数据时发生突变/网络请求。我遇到的问题是它会重绘整个行，这可能确实很慢，但实际上我只是在尝试更新单元格本身，因此它的速度更快，用户体验也更好。我曾经以为是做一个乐观的更新，只是更新我的缓存/利用我的缓存。你们采取了什么方法？

列和行数据都是通过阿波罗查询获取的。

这里有一些代码：

CheckboxRenderer

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import _ from "lodash";

class CheckboxItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false
    };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  componentDidMount() {
    this.setDefaultState();
  }

  setDefaultState() {
    const { data, colDef, api } = this.props;
    const { externalData } = api;
    if (externalData && externalData.length > 0) {
      if (_.find(data.roles, _.matchesProperty("name", colDef.headerName))) {
        this.setState({
          value: true
        });
      }
    }
  }

  updateGridAssociation(checked) {
    const { data, colDef } = this.props;
    // const { externalData, entitySpec, fieldSpec } = this.props.api;
    // console.log(data);
    // console.log(colDef);
    if (checked) {
      this.props.api.assign(data.id, colDef.id);
      return;
    }
    this.props.api.unassign(data.id, colDef.id);
    return;
  }

  handleCheckboxChange(event) {
    const checked = !this.state.value;
    this.updateGridAssociation(checked);
    this.setState({ value: checked });
  }

  render() {
    return (
      <Checkbox
        checked={this.state.value}
        onChange={this.handleCheckboxChange}
      />
    );
  }
}

export default CheckboxItem;

网格本身：

import React, { Component } from "react";
import { graphql, compose } from "react-apollo";
import gql from "graphql-tag";
import Grid from "@material-ui/core/Grid";
import _ from "lodash";
import { AgGridReact } from "ag-grid-react";
import { CheckboxItem } from "../Grid";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-material.css";

class UserRole extends Component {
  constructor(props) {
    super(props);
    this.api = null;
  }

  generateColumns = roles => {
    const columns = [];
    const initialColumn = {
      headerName: "User Email",
      editable: false,
      field: "email"
    };
    columns.push(initialColumn);
    _.forEach(roles, role => {
      const roleColumn = {
        headerName: role.name,
        editable: false,
        cellRendererFramework: CheckboxItem,
        id: role.id,
        suppressMenu: true,
        suppressSorting: true
      };
      columns.push(roleColumn);
    });
    if (this.api.setColumnDefs && roles) {
      this.api.setColumnDefs(columns);
    }
    return columns;
  };

  onGridReady = params => {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.assign = (userId, roleId) => {
      this.props.assignRole({
        variables: { userId, roleId },
        refetchQueries: () => ["allUserRoles", "isAuthenticated"]
      });
    };

    this.api.unassign = (userId, roleId) => {
      this.props.unassignRole({
        variables: { userId, roleId },
        refetchQueries: () => ["allUserRoles", "isAuthenticated"]
      });
    };
    params.api.sizeColumnsToFit();
  };

  onGridSizeChanged = params => {
    const gridWidth = document.getElementById("grid-wrapper").offsetWidth;
    const columnsToShow = [];
    const columnsToHide = [];
    let totalColsWidth = 0;
    const allColumns = params.columnApi.getAllColumns();
    for (let i = 0; i < allColumns.length; i++) {
      const column = allColumns[i];
      totalColsWidth += column.getMinWidth();
      if (totalColsWidth > gridWidth) {
        columnsToHide.push(column.colId);
      } else {
        columnsToShow.push(column.colId);
      }
    }
    params.columnApi.setColumnsVisible(columnsToShow, true);
    params.columnApi.setColumnsVisible(columnsToHide, false);
    params.api.sizeColumnsToFit();
  };

  onCellValueChanged = params => {};

  render() {
    console.log(this.props);
    const { users, roles } = this.props.userRoles;
    if (this.api) {
      this.api.setColumnDefs(this.generateColumns(roles));
      this.api.sizeColumnsToFit();
      this.api.externalData = roles;
      this.api.setRowData(_.cloneDeep(users));
    }
    return (
      <Grid
        item
        xs={12}
        sm={12}
        className="ag-theme-material"
        style={{
          height: "80vh",
          width: "100vh"
        }}
      >
        <AgGridReact
          onGridReady={this.onGridReady}
          onGridSizeChanged={this.onGridSizeChanged}
          columnDefs={[]}
          enableSorting
          pagination
          paginationAutoPageSize
          enableFilter
          enableCellChangeFlash
          rowData={_.cloneDeep(users)}
          deltaRowDataMode={true}
          getRowNodeId={data => data.id}
          onCellValueChanged={this.onCellValueChanged}
        />
      </Grid>
    );
  }
}

const userRolesQuery = gql`
  query allUserRoles {
    users {
      id
      email
      roles {
        id
        name
      }
    }

    roles {
      id
      name
    }
  }
`;

const unassignRole = gql`
  mutation($userId: String!, $roleId: String!) {
    unassignUserRole(userId: $userId, roleId: $roleId) {
      id
      email
      roles {
        id
        name
      }
    }
  }
`;

const assignRole = gql`
  mutation($userId: String!, $roleId: String!) {
    assignUserRole(userId: $userId, roleId: $roleId) {
      id
      email
      roles {
        id
        name
      }
    }
  }
`;

export default compose(
  graphql(userRolesQuery, {
    name: "userRoles",
    options: { fetchPolicy: "cache-and-network" }
  }),
  graphql(unassignRole, {
    name: "unassignRole"
  }),
  graphql(assignRole, {
    name: "assignRole"
  })
)(UserRole);

Answer 1

我不知道ag-grid，但是...在这种情况下发出请求会导致整个网格（UserRole组件）重新绘制。

当您将影响整个父状态的动作（传递给孩子）（这是新的数据到达props =>重绘）时，这是正常现象。

您可以通过shouldComponentUpdate（）避免这种情况-f.e.仅在行数更改时重绘。

但是还有另一个问题-您正在进行乐观的更改（更改复选框状态）-如果突变失败该怎么办？您必须处理阿波罗错误并强制重新绘制整个网格-更改是局部的（单元格）。这可以通过f.e.通过在shouldComponentUpdate中设置标志（使用setState）和附加条件。

Answer 2

我最好的解决方法是使用apollo中的网络状态执行一个shouldComponentUpdate，它进行了一些挖掘以了解正在发生的事情：

 /**
   * Important to understand that we use network statuses given to us by apollo to take over, if either are 4 (refetch) we hack around it by not updating
   * IF the statuses are also equal it indicates some sort of refetching is trying to take place
   * @param  {obj} nextProps [Next props passed into react lifecycle]
   * @return {[boolean]}           [true if should update, else its false to not]
   */

  shouldComponentUpdate = nextProps => {
    const prevNetStatus = this.props.userRoles.networkStatus;
    const netStatus = nextProps.userRoles.networkStatus;
    const error = nextProps.userRoles.networkStatus === 8;
    if (error) {
      return true;
    }
    return (
      prevNetStatus !== netStatus && prevNetStatus !== 4 && netStatus !== 4
    );
  };

它基本上是说如果有错误，请重新提交以准确无误（我认为可以确定不会发生很多错误，但是您永远不知道这是可以的），然后我检查是否有任何网络状态不是4（重新获取）），如果他们是我不希望重新投稿，请让我做我想做的事情，而不必在该级别进行干预。（就像更新子组件一样）。

prevNetStatus !== netStatus

这部分代码只是说我希望初始加载仅导致UI更新。我相信它可以从加载->成功作为网络状态开始工作，然后从成功->重新获得->成功或类似性质的东西中获得成功。

本质上，我只是查看了查询的道具，然后看到了可以使用的工具。

处理Ag网格反应并渲染复选框网格

2 个答案: