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

我想跳过容器的渲染，但通过

props

传递的

children

运行渲染和协调。在下一个示例中，您可以单击它并查看

render
render2
render value 2001
render value 3001

但我希望是这样

render
render value 1001
render2
render value 2001
render value 3001

因此，我希望

Value

1001

进行渲染，但不渲染

Wrapper1

我该怎么做

类值扩展了React.Component{
render（）{
log（“渲染值”+此.props.value）；
返回此.props.value；
}
}
类包装器1扩展了React.Component{
shouldComponentUpdate（）{
返回false；
}
render（）{
控制台日志（“render1”）；
返回此.props.children；
}
}
类包装器2扩展了React.PureComponent{
render（）{
控制台日志（“render2”）；
返回此.props.children；
}
}
类应用程序扩展了React.Component{
状态={count:0}；
render（）{
控制台日志（“呈现”）；
返回(
this.setState（（{count}）=>（{count:count+1}））}>
{" "}
{" "}
);
}
}
ReactDOM.render（，document.querySelector（“main”））
尝试使用
重新播放子项而不重新播放
Wrapper1
您需要以某种方式更改它们的状态。请注意，
Wrapper1
内部
Value
的
props
从未更改。因此，强制渲染将输出相同的值，除非以其他方式传递该值。有一些错误代码，例如：


类值扩展了React.Component{
状态={value:null}；
componentDidMount（）{
if（typeof（this.props.setUpdater）==“function”）this.props.setUpdater(
value=>this.setState（{value}）
);
}
render（）{
log（“呈现值”，this.state.value，this.props.value）；
返回this.state.value | | this.props.value；
}
}
类包装器1扩展了React.Component{
shouldComponentUpdate（）{
返回false；
}
render（）{
控制台日志（“render1”）；
返回此.props.children；
}
}
类包装器2扩展了React.PureComponent{
render（）{
控制台日志（“render2”）；
返回此.props.children；
}
}
类应用程序扩展了React.Component{
状态={count:0}；
render（）{
控制台日志（“呈现”）；
if（typeof（this.state.updater）==“function”）this.state.updater（1000+this.state.count）；
返回(
this.setState（（{count}）=>（{count:count+1}））}>
this.setState（{updater}}/>
{" "}
{" "}
);
}
}
ReactDOM.render（，document.querySelector（“main”））
为什么需要
包装器1
？为什么要跳过渲染它？检查