我正在学习React,想问一下,无论是功能组件还是类组件,即使我们根本不传递道具,也要重新渲染。为了简单起见,让我们假设<Counter><Input/></Counter>
。因此,我们有计数器组件,在内部有输入组件。问题是当我们更改计数器组件的状态时,即使我们不传递任何道具来输入组件,输入组件也会重新呈现吗?
}
答案 0 :(得分:1)
从技术上讲,Input是子组件或Counter组件,并作为children
prop传递给Counter。
如果Counter内的状态已更新并重新渲染,则输入组件将不会重新渲染。
但是,如果渲染Counter
和Input
组件的组件重新渲染,则除非您将它们实现为PureComponent
附上一个小样进行概念验证。
class App extends React.Component {
state = {
toggle: false
}
render() {
return (
<div>
<Counter><Input /></Counter>
<div><button type="button" onClick={() => this.setState(prev=> ({toggle: !prev.toggle}))}>Toggle App state</button></div>
</div>
)
}
}
class Counter extends React.Component {
state = {
count: 0
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState(prev => ({count: prev.count + 1}));
}, 1000)
}
render() {
console.log('counter render');
return (
<React.Fragment>
<div>Counter: {this.state.count}</div>
{this.props.children}
</React.Fragment>
)
}
}
const Input = () => {
console.log('Input render');
return (
<input type="text" placeholder="Enter text" />
)
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>