仅对儿童运行渲染和调解程序

Question

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

render
render2
render value 2001
render value 3001

但我希望它是

render
render value 1001
render2
render value 2001
render value 3001

所以我想要Value1001进行渲染，但不渲染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的情况下重新渲染子对象，您需要以某种方式更改它们的状态。注意，Wrapper1内部的Value的props从未改变。因此，强制渲染将输出相同的值，除非您以其他方式传递它。有一些坏代码，例如：

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