Question

我想跳过容器的渲染，但是为通过childeren传递的props运行渲染和协调。在下一个示例中，您可以单击它并查看

render
render2
render value 2001
render value 3001

但我希望成为

render
render value 1001
render2
render value 2001
render value 3001

所以我想Value 1001渲染，但不渲染Wrapper1。

我该怎么做？

class Value extends React.Component {
  render() {
    console.log("render value " + this.props.value);
    return this.props.value;
  }
}

class Wrapper1 extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    console.log("render1");
    return this.props.children;
  }
}

class Wrapper2 extends React.PureComponent {
  render() {
    console.log("render2");
    return this.props.children;
  }
}

class App extends React.Component {
  state = { count: 0 };

  render() {
    console.log("render");
    return (
      <div onClick={() => this.setState(({ count }) => ({ count: count + 1 }))}>
        <Wrapper1><Value value={1000 + this.state.count} /></Wrapper1>
        {" "}
        <Wrapper2><Value value={2000 + this.state.count} /></Wrapper2>
        {" "}
        <Value value={3000 + this.state.count} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("main"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<main></main>

Answer 1

要在不重新提交Wrapper1的情况下重新提交孩子，您需要以某种方式更改他们的状态。请注意，props中Value中的Wrapper1永远不会改变。因此，除非您通过其他方式传递，否则强制渲染将输出相同的值。例如，有一些错误的代码：

class Value extends React.Component {
  state = {value: null};

  componentDidMount() {
    if (typeof(this.props.setUpdater) === 'function') this.props.setUpdater(
      value => this.setState({value})
    );
  }

  render() {
    console.log("render value ", this.state.value, this.props.value);
    return this.state.value || this.props.value;
  }
}

class Wrapper1 extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    console.log("render1");
    return this.props.children;
  }
}

class Wrapper2 extends React.PureComponent {
  render() {
    console.log("render2");
    return this.props.children;
  }
}

class App extends React.Component {
  state = { count: 0 };

  render() {
    console.log("render");
    if (typeof(this.state.updater) === 'function') this.state.updater(1000 + this.state.count);
    return (
      <div onClick={() => this.setState(({ count }) => ({ count: count + 1 }))}>
        <Wrapper1><Value value={1000 + this.state.count} setUpdater={updater => this.setState({updater})}/></Wrapper1>
        {" "}
        <Wrapper2><Value value={2000 + this.state.count} /></Wrapper2>
        {" "}
        <Value value={3000 + this.state.count} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("main"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<main></main>

Answer 2

尝试使用shouldComponentUpdate

仅在子级上运行渲染和协调器

2 个答案: