Question

我正在使用react进行界面处理。单击“按钮”区域中的按钮后，“过滤器文本输入”中的表达式必须用于查询REST接口，该接口将项目列表作为JSON返回。必须将此数据传递到左下方面板以更新树视图。 “过滤器文本输入”+“按钮”是受控输入。

+-------------------------------------+
| +-------------------------+-------+ |
| | filter text input       |Buttons| |
| +-------------------------+-------+ |
+----------+--------------------------+
| + item1  | +---------------+        |
| |  +-... | | text input    |        |
| + item2  | +---------------+        |
| |  +-... | +---------------+        |
| + item3  | | text input    |        |
| |  +-... | +---------------+        |
| + item4  |                          |
| |  +-... | ...                      |
+----------|--------------------------+

根据所有教程和文档的规范方法是将状态转换为公共父级。但是，这是一个非常糟糕的主意，因为对于每一个键击，整个视图将完全更新，包括左侧面板中的树。是否有一种普遍接受的方式（和良好做法）在属于同一父母的组件之间交换数据而不向上移动状态或是否有其他方法？

Answer 1

我看到两个选项：

坚持使用当前的方法（这听起来合法且直截了当），但利用import java.util.Scanner; class Example { public static boolean solution(int N) { boolean isNumber = false; @SuppressWarnings("unused") int i=1; int c=0,a,temp; temp=N; while(N>0) { a=N%10; N=N/10; c=c+(a*a*a); } if(temp==c) { i = isNumber ? 1 : 0; } System.out.println(isNumber); return isNumber; } } class Arm { public static void main(String[] args) { @SuppressWarnings("resource") Scanner s = new Scanner(System.in); int N = s.nextInt(); @SuppressWarnings("unused") Example ex= new Example(); Example.solution(N); } }来防止不必要的更新。
使用中央数据存储。查看this。

Answer 2

如果您已将代码正确放在一起，则此处不应存在性能问题，也无需使用Redux等集中式数据存储。

However, this is a pretty bad idea because with every single key stroke the whole view will be updated entirely, including the tree in the left panel

你尝试过吗？如果树的其余部分没有改变，React将在遍历两个虚拟DOM树进行更改时实现此目的，并且不会重新呈现未更改的内容。除非您错误地使用key道具并强制重新渲染，否则不会发生这种情况，因为子树都是相同的。

然而，确实在所有这些子组件上调用render方法。如Or B所述，防止这种情况的最佳方法是使用shouldComponentUpdate;如下所示：

shouldComponentUpdate(nextProps) {
  if (this.props.propA !== nextProps.propA) {
    return true; // re-render
  }
  return false; // don't re-render
}

您可以使用PureComponent类轻松地进行全面检查，如下所示：

import React, { PureComponent } from 'react';

class MyClass extends PureComponent {
  ...

这会对传递给组件的所有道具进行浅层检查。使用pure的{{1}}方法可以实现相同的功能，如下所示：

recompose

Answer 3

你必须小心传递回调的方式。如果将它们作为箭头函数传递，则每次呈现组件时都会创建不同的回调。从文档：＆＃34;但是，如果将此回调作为prop传递给较低的组件，那么这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中使用绑定或使用类字段语法来避免这种性能问题。＆＃34;有关详细信息，请参阅https://reactjs.org/docs/handling-events.html。

在两个子组件之间传递数据而不向上移动状态

3 个答案: