即使我们不传递道具,组件也会重新渲染吗?

时间:2020-04-03 05:57:49

标签: reactjs

我正在学习React,想问一下,无论是功能组件还是类组件,即使我们根本不传递道具,也要重新渲染。为了简单起见,让我们假设<Counter><Input/></Counter>。因此,我们有计数器组件,在内部有输入组件。问题是当我们更改计数器组件的状态时,即使我们不传递任何道具来输入组件,输入组件也会重新呈现吗?

}

1 个答案:

答案 0 :(得分:1)

从技术上讲,Input是子组件或Counter组件,并作为children prop传递给Counter。

如果Counter内的状态已更新并重新渲染,则输入组件将不会重新渲染。

但是,如果渲染CounterInput组件的组件重新渲染,则除非您将它们实现为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"/>