Question

假设我有一个类似的反应层次结构

Parent
  |- Child1
  |- Child2

每个孩子都需要相同的值x。但是，假设x是从某些复杂计算x = compute_my_value(data)的数据中得出的。看来有两种选择

// OPTION 1
function Child1(props){
   let x = compute_my_value(props.data)
   ... do something with x
}

function Child2(props){
  let x = compute_my_value(props.data)
  ... do something different with x
}

或

//Option 2
function Parent(props){
  let x = compute_my_value
  return (
    <Child1 x=x />
    <Child2 x=x />
)}

选项1可使我的组件保持独立，但使所需的计算量增加一倍。选项2表示子代与父代紧密耦合，因为它们需要x进行预先计算和传递，但节省了计算量（尤其是在有许多这样的计算子代x昂贵的情况下）。

我的问题是这个：

是否存在第三个选项，其中子项与父母，但是x的价值仍然可以在孩子之间共享吗？

Answer 1

另一种选择是使用reselect，它通常与redux结合使用，但可以在其外部使用。

基本上，此库可防止原始数据未更改而实际需要的多次计算可派生数据。

您可以像这样创建选择器（称为xSelector）

// selectors.js
import { createSelector } from 'reselect';

export const xSelector = createSelector(
    data => data,
    data => compute_my_value(data)
);

默认缓存大小为1，因此仅在数据更改后才会调用compute_my_value

然后，您可以在Child组件中使用此选择器

import {xSelector} from "./selectors";

function Child1(props){
  const x = xSelector(props.data)
   ... do something with x
}

React-重新计算子组件中的值

1 个答案: