Reactjs React和Redux架构

我对React和Redux架构有疑问

假设您有标准化的数据

const user = [
  { userId: 1, name: 'Ian', groupId: 1 },
  { userId: 2, name: 'Tom', groupId: 2 }
]

const groups = [
  { groupId: 1, groupName: 'Facebook developers'},
  { groupId: 2, groupName: 'Google developers'}
]

const chat = {
  { userIdFrom: 1, message: 'Hello!', timestamp: 1324132332 },
}

操作数据的最佳实践是什么，例如

.map

，

.filter

，

.reduce

，

.forEach

，

.sort

，反规范化等

我创建utils函数来处理大量数据操作，比如

utils.getChatsFromUsers

等，并从组件上的

render

方法调用

这是我的解决方案在组件的

render

函数中处理大量数据操作的良好实践吗

请给我你的建议和见解。

---

谢谢

在render方法中操纵数组并不是一个好的做法，除非数组是唯一要渲染的对象，或者如果数组是道具，则很可能会发生更改。您应该在componentWillReceiveProps中操纵它们

因此，与其有这样的东西：

render() {
    const { string1, string2, string3, array } = this.props;
    const mappedArray = array.map(element => <li>{element}</li>);
    return (
      <div>
        <p>{string1}</p>
        <p>{string3}</p>
        <p>{string3}</p>
        <ul>{mappedArray}</ul>
      </div>
  );
}

componentWillReceiveProps(nextProps) {
  // R is from ramda, but you can compare the arrays any way you want
  // even just comparing the array references if that's good enough for you
  if (R.equals(nextProps.array, this.props.array)) {
    this.mappedArray = array.map(element => <li>{element}</li>);
  }
}

render() {
    const { string1, string2, string3, array } = this.props;
    return (
      <div>
        <p>{string1}</p>
        <p>{string3}</p>
        <p>{string3}</p>
        <ul>{this.mappedArray}</ul>
      </div>
  );
}

render（）{
const{string1，string2，string3，array}=this.props；
常量mappedArray=array.map（element=>
{element}
）；
返回(
{string1}

{string3}

{string3}

{mappedaray}
);
}

你应该这样做：

render() {
    const { string1, string2, string3, array } = this.props;
    const mappedArray = array.map(element => <li>{element}</li>);
    return (
      <div>
        <p>{string1}</p>
        <p>{string3}</p>
        <p>{string3}</p>
        <ul>{mappedArray}</ul>
      </div>
  );
}

componentWillReceiveProps(nextProps) {
  // R is from ramda, but you can compare the arrays any way you want
  // even just comparing the array references if that's good enough for you
  if (R.equals(nextProps.array, this.props.array)) {
    this.mappedArray = array.map(element => <li>{element}</li>);
  }
}

render() {
    const { string1, string2, string3, array } = this.props;
    return (
      <div>
        <p>{string1}</p>
        <p>{string3}</p>
        <p>{string3}</p>
        <ul>{this.mappedArray}</ul>
      </div>
  );
}

组件将接收道具（下一步）{
//R来自ramda，但您可以按任何方式比较阵列
//即使只是比较数组引用，如果这对您来说足够好的话
if（R.equals（nextrops.array，this.props.array））{
this.mappedaray=array.map（element=>
{element}
）；
}
}
render（）{
const{string1，string2，string3，array}=this.props；
返回(
{string1}

{string3}

{string3}

{this.mappedaray}
);
}

通过这种方式，您可以避免每次调用render方法时都必须重新创建映射数组（其他道具更改或状态更改可能会导致这种情况）

---

本主题已涵盖。

我会找到一种方法来最小化渲染方法中的数据操作，因为它唯一应该关心的是显示UI。您希望这些数据多久更改一次？是实时更新、用户刷新等吗？谢谢您的评论。数据不会经常更改，所以我还没有在这个应用程序中使用redux。但当涉及到对它进行反规范化并保留它时，我正在考虑创建Redux并对reducer函数的数据进行反规范化。否则，在UI组件上对其进行反规范化，并更新组件的状态，这对我来说听起来很混乱……如果您正在使用规范化数据，并且只是将其显示给用户，为什么需要对其进行反规范化？在我看来，您正在从多个标准化数据源创建一个新的数据结构。您所需要做的就是将数据转换成您想要的任何形式，将其保存在state（或redux）中并显示它。