javascript - 传递对象时防止在 PureComponent 上重新渲染

Question

使用 PureComponents 时与功能组件相比，您的优势在于组件在父组件更新时并不总是呈现。它实际上仅在组件 Prop 发生变化时才会呈现，在此示例中仅当您更改输入时。

如何在不破坏使用此类组件的所有优势的情况下将对象传递给 PureComponent？

这是否意味着一旦你有了一个你希望它是对象类型的 Prop ，最好让你的组件发挥作用？

我添加了一个例子来说明我的意思...(可能你需要在新窗口中打开它，因为有很多不同的 child )

class TestPureComponent extends React.PureComponent {
  render() {
    return <div style={{border: '1px solid black'}}>{this.props.text} : {this.props.inputValue} {Math.random()} <button onClick={() => {this.props.dismissClicked()}}>Click me</button>  </div>
  }
}

function TestFunctionalComponent () {
  return <div style={{border: '1px solid black'}}>I always update as I am a functional component {Math.random()}</div>
}

const hell = () => {console.log('Logs hello')}

class RenderExample extends React.Component {
  constructor (props) {
    super(props)
    this.state = {clicked: false, inputValue: 'inputValue'}
    this.onClick = this.onClick.bind(this)
    this.doSomething = this.doSomething.bind(this)
  }

  onClick () {
    this.setState({clicked: !this.state.clicked})
  }
  
  doSomething () {
    console.log('helllllo')
  }
  
  heee = () => {
    console.log('heeeee')
  }

  render () {
    return <div>
      <button onClick={this.onClick}>
        Update state (forces re-render) {this.state.clicked && 'clicked'}
      </button>
      <input onChange={(e) => this.setState({inputValue: e.target.value})} type="text" value={this.state.inputValue}/>
      <br/>
      <br/>
      <TestFunctionalComponent />
      <br/>
      <TestPureComponent dismissClicked={() => hell} inputValue={this.state.inputValue} text="If you click the button this will re-render, if you change the input this will re-render"/>
      <br/>
      <TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={this.doSomething} inputValue={this.state.inputValue}/>
      <br/>
      <TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={this.heee} inputValue={this.state.inputValue}/>
      <br/>
      <TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={hell} inputValue={this.state.inputValue}/>
      <br/>
      <TestPureComponent text="If you click the button this will NOT re-render, if you change the input this will re-render" dismissClicked={hell} inputValue={this.state.inputValue}/>
      <br/><br/>
      <div> we will now add an inline object to each component and now they all update</div>
      
      <TestPureComponent dismissClicked={() => hell} inlineOBJ={{hello: 'world'}} inputValue={this.state.inputValue} text="If you click the button this will re-render, if you change the input this will re-render"/>
      <br/>
      <TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={this.doSomething} inputValue={this.state.inputValue}/>
      <br/>
      <TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={this.heee} inputValue={this.state.inputValue}/>
      <br/>
      <TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={hell} inputValue={this.state.inputValue}/>
      <br/>
      <TestPureComponent text="If you click the button this will re-render, if you change the input this will re-render" inlineOBJ={{hello: 'world'}} dismissClicked={hell} inputValue={this.state.inputValue}/>
    </div>
  }
}

ReactDOM.render(<RenderExample />, document.getElementById('root'))

<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="root"></div>

我想要的是看看是否有一种 PureComponent 的方法，当有一个 OBJECT 作为 prop 传入时，它不会总是更新。

Answer 1

您必须将该对象存储在某处，以便它不会在每次重新渲染时生成。这也适用于在渲染期间生成的函数(dismissClicked={() => hell})。

函数应该在渲染函数之外，这样它们就不会像这样为每个渲染创建: dismissClicked={this.hell}

对于对象，只需将其保存在状态中即可。

您可以使用功能组件实现完全相同的效果。使用 memo 包裹组件以启用浅比较。

要防止在每次渲染时生成函数，请使用 useCallback 和 useState 来保存您传递给子级的对象，以便引用保持不变。

您可以使用 useEffect 轻松更新这些对象。

希望这对您有所帮助。快乐编码。