停止函数在渲染时自动触发

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // 错误的做法：在渲染过程中直接调用函数
  console.log(handleClick());

  function handleClick() {
    return `Clicked ${count} times`;
  }

  return (
    <div>
      <p>{handleClick()}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // 正确的做法：只在需要的时候调用函数
  function handleClick() {
    return `Clicked ${count} times`;
  }

  return (
    <div>
      <p>{handleClick()}</p> {/* 正确使用 */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

<template>
  <div>
    <p>{{ handleClick() }}</p> <!-- 错误使用 -->
    <button @click="increment">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleClick() {
      return `Clicked ${this.count} times`;
    },
    increment() {
      this.count++;
    }
  }
};
</script>

<template>
  <div>
    <p>{{ handleClick }}</p> <!-- 正确使用 -->
    <button @click="increment">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    handleClick() {
      return `Clicked ${this.count} times`;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>