<div id="app"></div>
class Foo extends React.PureComponent {
  render () {
    console.log("Foo render", this.props.name)
    return <div onClick={this.props.onClick}>Foo {this.props.name}</div>
  }
}

class App extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = { checked: false }
    this.list = ['a', 'b', 'c', 'd']
    this.cache = {}
  }
  
  render () {
    return (
      <div>
        <label>
          <input
            onChange={event => this.setState({ checked: event.target.checked })}
            type="checkbox"
            checked={this.state.checked}
            />
          点击切换
        </label>
        {this.list.map(item => (
          <Foo
            key={item}
            name={item}
            onClick={this.cache[0] || (this.cache[0] = () => console.log('clicked'))}
           />
        ))}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js
  3. https://cdn.jsdelivr.net/npm/sweet-log/dist/index.js?display=1