React标签内函数部分案例

1、标签内函数带括号会自动触发函数执行：

基础类代码：

//1、创建类式组件
class MyComponent extends React.Component{
	show(){
		console.log(‘你好’);
	}
	render(){
		return <h2 onClick={this.show}>点击</h2>
	}
}
//2、渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))

1. 标签内无参：this.show。
   点击，控制台输出：‘你好’。

2. 标签内无参带括号：this.show（）。
   控制台自动输出：‘你好’。点击没有结果。

3. 标签内有参：this.show（“你好”）

   //1、创建类式组件
   class MyComponent extends React.Component{
   	show(arg){
   		console.log(arg);
   	}
   	render(){
   		return <h2 onClick={this.show("你好")}>点击</h2>
   	}
   }
   //2、渲染组件到页面
   ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
   

   ​ 控制台自动输出：‘你好’。点击没有结果。

解决例子三：
使用回调函数

show=(arg)=>{
	return ()=>{
	console.log(arg);
}}

点击，控制台输出：‘你好’。

2、如何解决标签内事件，每次渲染都会触发函数自动执行：

在 React 中，当组件渲染时，如果将方法直接作为事件处理函数绑定到标签内，会导致该方法在每次渲染时都被执行。这是因为每次渲染都会重新创建一个新的函数实例，导致传递给子组件的方法发生变化，从而触发重新渲染。

1、使用箭头函数或 bind 方法：

使用箭头函数或 bind 方法来绑定事件处理函数，确保每次渲染时使用的是同一个函数引用。

2、使用useCallback