解决react/jsx-no-bind报错

export default function Test {
	const [ num, setNum ] = useState(0)
	const addNum = () => {
		setNum(num + 1)
	}
	return (
		<div>
			{ num }
			<button onClick={addNum}>增加</button>
		</div>
	)
}

上述代码会导致eslint报错JSX props should not use arrow functions.因为当state变化时，重新定义了addNum函数，导致性能浪费。

解决方案：

方案一、回调函数与state无关，可以将该回调定义在组件外。

const addNum = () => {
	console.log(1)
}
export default function Test {
	return (
		<div>
			{ num }
			<button onClick={addNum}>增加</button>
		</div>
	)
}	

方案二、回调函数与state有关，使用useCallback hook记住该回调，避免重复定义。

export default function Test {
	const [ num, setNum ] = useState(0)
	const addNum = useCallback(() => {
		setNum(num => num + 1)
	}, [setNum])
	return (
		<div>
			{ num }
			<button onClick={addNum}>增加</button>
		</div>
	)
}