react如何使用函数
使用函数组件的基本语法
在React中，函数组件是通过JavaScript函数定义的组件。函数接收props作为参数，并返回React元素。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}使用Hooks增强功能
React 16.8引入的Hooks允许在函数组件中使用状态和其他React特性。常用Hooks包括useState、useEffect等。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}处理事件
函数组件中可以直接在元素上定义事件处理函数，或通过自定义函数处理。
function HandleEvent() {
function handleClick() {
alert('Button clicked');
}
return <button onClick={handleClick}>Click</button>;
}组合组件
函数组件可以嵌套使用，通过props传递数据和函数。
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
}使用条件渲染
函数组件中可以使用JavaScript的条件语句或三元运算符实现条件渲染。
function Greeting({ isLoggedIn }) {
return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}列表和Key
使用map方法渲染列表时，需为每个元素分配唯一的key。
function NumberList({ numbers }) {
return (
<ul>
{numbers.map((number) => (
<li key={number.id}>{number.value}</li>
))}
</ul>
);
}使用Effect处理副作用
useEffect Hook用于处理数据获取、订阅或手动修改DOM等副作用。
function Example() {
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
}自定义Hooks
通过自定义Hook可以将组件逻辑提取到可重用的函数中。
function useCustomHook(initialValue) {
const [value, setValue] = useState(initialValue);
// 自定义逻辑
return [value, setValue];
}性能优化
使用React.memo避免不必要的渲染，或通过useCallback和useMemo优化性能。
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});
