React函数式声明组件语法

React函数式组件语法

import React from 'react';
function MyComponent(props){return <div>{props.title}</div>;
}
export default MyComponent;

箭头函数语法
箭头函数语法是一种简洁的函数式声明组件的语法，它不需要使用 function 关键字，直接使用箭头函数即可。它的函数体返回一个 JSX 元素。

interface Props {name: string;
}
const MyComponent= ({ name }: Props) => <div>Hello, {name}!</div>;
export default MyComponent;

使用场景：适用于定义无状态的组件，只接收 props，并返回一个 JSX 元素。

React函数式组件语法+React.memo

React.memo是React提供的一个高阶组件，用于优化函数式组件的性能。它可以缓存组件的渲染结果，只有当组件的props发生变化时才会重新渲染组件。

import React from 'react';
const MyComponent = React.memo(function(props){return <div>{props.title}</div>;
});
export default MyComponent;

使用React.memo优化组件的步骤如下：

// 1.导入React和React.memo：
import React, { memo } from 'react';
// 2.定义一个函数式组件：
function MyComponent(props) {// 组件的实现逻辑return (...);
}
// 3.使用memo高阶组件包装组件：
const MemoizedComponent = memo(MyComponent);
// 4. 将MemoizedComponent作为组件使用：
function App() {return (<div><MemoizedComponent prop1="value1" prop2="value2" /></div>);
}

注意事项

• React.memo只会对props进行浅比较，如果props包含复杂数据类型（如数组或对象），则需要确保它们的引用地址不变，否则会导致组件不必要的重新渲染。
• React.memo只能用于函数式组件，不能用于类组件。

React函数式组件语法+React.forwardRef

React.forwardRef 是一种将 ref 传递给子组件的高阶组件。它接受一个函数组件作为参数，并返回一个新的函数组件，这个新的函数组件可以接受 ref 作为参数，然后将 ref 传递给子组件。
使用场景：

• 父组件需要访问子组件中的 DOM 元素时，可以使用 ref。
• 如果子组件是一个函数式组件，需要支持 ref，可以使用
  React.forwardRef() 将其包装成支持 ref 的组件。

const MyComponent = React.forwardRef((props, ref) => {return <input type="text" ref={ref} />;
});// 使用 MyComponent 组件，并访问其 DOM 元素
function ParentComponent() {const inputRef = React.useRef(null);React.useEffect(() => {inputRef.current.focus();}, []);return <MyComponent ref={inputRef} />;
}

import React from 'react';
interface Props {name: string;forwardedRef: React.RefObject<HTMLDivElement>;
}const MyComponent = React.forwardRef<HTMLDivElement, Props>(({ name }, ref) => {return <div ref={ref}>Hello, {name}!</div>;
});
export default MyComponent;

useImperativeHandle()函数

//在这个例子中，MyComponent是一个函数式声明组件，它使用React.forwardRef()函数来转发ref。在MyComponent中，我们使用useRef()函数来创建一个ref，并在useImperativeHandle()函数中暴露了一个focus()方法。在父组件中，我们使用useRef()函数来创建一个ref，并将它传递给MyComponent
const MyComponent = React.forwardRef((props,ref) => {const inputRef = useRef(null);useImperativeHandle(ref,()=>({focus:() => {inputRef.current.focus();}}));return <input ref={inputRef}/>;
});
function App(){const inputRef = useRef(null);const handleClick = () => {inputRef.current.focus();};return (<div><MyComponent ref={inputRef} /><button onClick={handleClick}>Focus Input</button></div>);
}

React函数式组件语法+React.FC()

React.FunctionComponent 或 React.FC 是一种函数式声明组件的语法，它是一种泛型类型，接受一个泛型参数，用来定义组件的 props 类型。组件的函数体返回一个 JSX 元素。React.FC() 是一个类型别名，用于定义函数式组件的类型。
使用场景：适用于定义无状态的组件，只接收 props，并返回一个 JSX 元素。

import React from 'react';
interface MyComponentProps {title: string;
}
const MyComponent: React.FC<MyComponentProps> = (props) => {return <div>{props.title}</div>;
};
export default MyComponent;