Question

我想知道最好的方法是什么..

父组件：

export class Parent extends Component {
  constructor() {
    super();
    this.state = {
      ranks: {},
    }
  }

  handleClick = (item) => {
    const newState = update(this.state, { ranks: { [item]: { $set: item } } });
    this.setState(newState);
  }

  render() {
    return (
      <ChildList ranks={ this.state.ranks } onClick={ (item) => handleClick(item) />
    )
  }
}

子列表组件：

const list = ['example', 'of', 'long', 'list', 'of', 'strings'];

export const ChildList = (props) => (
  list.map(item => <Child key={ item } item={ item } onClick={ props.onClick } />);
);

子组件：

export const Child = (props) => (
  <div onClick={ () => props.onClick(props.item) }>
    { props.item }
  </div>
);

我想做的事情：

当我单击其中一个子组件时，我想在父组件的this.state.ranks上设置状态，为每个子项添加一个单独的对象，如果单击了Child。显然上面的例子有点愚蠢，但在原始代码中它设置了许多布尔值的对象来创建类似于图表的东西。

无论如何，这不是我想问的问题。发生的事情是当状态在Parent上发生变化时，ChildList会被重新呈现。意味着整个列表被重新渲染。这可能需要2到3秒，具体取决于列表的长度。这显然不太好。

我试图将ChildList放在componentWillMount中，尝试放入shouldComponentUpdate，并尝试将ChildList元素放在一个状态，但所有三个都意味着状态改变，没有视觉变化，即没有重新渲染。

我无法将父组件中的状态移动到其他地方，因为其他兄弟组件依赖于它的子组件。

我不知道该怎么做。请帮忙。

修改

基本上，我想更改一个Child组件，但是ChildList组件不应该重新呈现整个Childs数组。

React SetState ReRenders元素数组缓慢

0 个答案: