功能组件子组件在其属性被其父组件更新后不会重新呈现

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <ChildComponent />
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 只有当父组件的count属性发生变化时才重新渲染
    if (nextProps.count === this.props.count) {
      return false;
    }
    return true;
  }

  render() {
    return (
      <div>
        <h3>Child Component</h3>
        <p>Count: {this.props.count}</p>
      </div>
    );
  }
}

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <ChildComponent :count="count" />
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
      }
    },
    components: {
      ChildComponent
    }
  };
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>Child Component</h3>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
  export default {
    props: ['count'],
    computed: {
      // 通过计算属性确保只依赖于父组件传递的count属性
      computedCount() {
        return this.count;
      }
    }
  };
</script>