Reactjs 将类属性数据绑定到react组件

我正试图找到一种更好的方法来处理react组件中的逻辑。但是，由于我没有在这里使用state，所以没有任何运气

首先是一些背景。我的前端有非常复杂的逻辑，逻辑类中有几个分层递归参数、n个参数和几个方法，这对于编译和管理我想要呈现的属性对象的逻辑树非常有用。使用状态执行此操作非常复杂，尤其是由于递归。同样，像这样抽象逻辑使得测试非常简单

因此，在一个完美的世界中，流动是理想的：

import React from 'react';

class Logic {
  constructor(init) {
    this.c = init;
    this.incC = this.incC.bind(this);
  }

  incC () {
    this.c = this.c+1;
  }
}

const Test = ({logic}) => (
  <div>
    {logic.c} 
    {' '}
    <button onClick={logic.incC} type='button'>Inc</button>
  </div>
);

const Comp = () => {
  const logic = new Logic(0);
  return (<Test logic={logic} />);
};

export default Comp;

---

我正在考虑的另一个想法是将对象树写入apollo缓存，然后在需要属性的地方查询缓存。但是这个方法有点复杂。

我使用Apollo缓存解决了这个抽象问题：

import React from 'react';
import gql from 'graphql-tag';
import { useQuery , useApolloClient } from '@apollo/react-hooks';

class Logic {
  constructor(client) {
    this.client = client;

    this.c = 0;
    this.name = 'new';

    this.inc = this.inc.bind(this);
    this.setName = this.setName.bind(this);
    this.set = this.set.bind(this);
    this.set();
  }

  set() {
    this.client.writeData({
      data: {
        count: this.c,
        name: this.name
      },
    });
  }

  inc () {
    this.c = this.c+1;
    this.set();
  }

  setName (v) {
    this.name = v.target.value;
    this.set();
  }

}


const countQuery = gql`
  query getCount {
    count @client
    name @client
  }
`;

const Test = ({logic}) => {
  const { loading, error, data } = useQuery(countQuery);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      {data.count}
      {' '}
      <button onClick={logic.inc} type='button'>Inc</button>
      <br />
      <input value={data.name} onChange={v=>logic.setName(v)} />
    </div>
  );
};


const App = () => {
  const client = useApolloClient();
  const logic = new Logic(client);
  return (<Test logic={logic} />);
};

export default App;

从“React”导入React；
从“graphql标签”导入gql；
从“@apollo/react hooks”导入{useQuery，useApolloClient}；
类逻辑{
建造商（客户）{
this.client=client；
这个c=0；
this.name='new'；
this.inc=this.inc.bind（this）；
this.setName=this.setName.bind（this）；
this.set=this.set.bind（this）；
this.set（）；
}
集合（）{
this.client.writeData({
数据：{
伯爵：这个，
姓名：this.name
},
});
}
公司（）{
这个.c=这个.c+1；
this.set（）；
}
集合名（v）{
this.name=v.target.value；
this.set（）；
}
}
const countQuery=gql`
查询getCount{
count@client
name@client
}
`;
常量测试=（{logic}）=>{
const{loading，error，data}=useQuery（countQuery）；
如果（加载）返回“加载…”；
if（error）返回`error！${error.message}`；
返回(
{data.count}
{' '}
股份有限公司


logic.setName（v）}/>
);
};
常量应用=（）=>{
const client=useAppolloClient（）；
常量逻辑=新逻辑（客户端）；
返回（）；
};
导出默认应用程序；

这是一个很好的示例，可以抽象一个逻辑类，使用Apollo客户端缓存从react组件中轻松测试该类

import React from 'react';
import gql from 'graphql-tag';
import { useQuery , useApolloClient } from '@apollo/react-hooks';

class Logic {
  constructor(client) {
    this.client = client;

    this.c = 0;
    this.name = 'new';

    this.inc = this.inc.bind(this);
    this.setName = this.setName.bind(this);
    this.set = this.set.bind(this);
    this.set();
  }

  set() {
    this.client.writeData({
      data: {
        count: this.c,
        name: this.name
      },
    });
  }

  inc () {
    this.c = this.c+1;
    this.set();
  }

  setName (v) {
    this.name = v.target.value;
    this.set();
  }

}


const countQuery = gql`
  query getCount {
    count @client
    name @client
  }
`;

const Test = ({logic}) => {
  const { loading, error, data } = useQuery(countQuery);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      {data.count}
      {' '}
      <button onClick={logic.inc} type='button'>Inc</button>
      <br />
      <input value={data.name} onChange={v=>logic.setName(v)} />
    </div>
  );
};


const App = () => {
  const client = useApolloClient();
  const logic = new Logic(client);
  return (<Test logic={logic} />);
};

export default App;