时间戳

首页 > 解决方案 > 即使我们不向它传递道具，组件也会重新渲染吗？

reactjs - 即使我们不向它传递道具，组件也会重新渲染吗？

问题描述

我正在学习 React，想问一下，无论是函数式组件还是类组件，即使我们根本不向它传递 props，是否也要重新渲染。为简单起见，让我们想象一下<Counter><Input/></Counter>。所以我们有计数器组件，其中我们有输入组件。问题是当我们改变计数器组件的状态时，即使我们没有将任何道具传递给输入，输入组件也会重新渲染？

}

标签： reactjs

解决方案

从技术上讲，Input 是一个子组件或 Counter 组件，并作为childrenprop 传递给 Counter。

如果 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"/>

推荐阅读