react的函数组件使用详情
时间: 2023-12-30 22:06:56 浏览: 23
React 的函数组件是一种更简洁、易于理解和维护的方式来构建 UI 逻辑。函数组件是纯粹的 JavaScript 函数,用于接收一个 props 对象并返回一个 React 元素作为输出。在函数组件中,可以使用 `useState` 和 `useEffect` 等 `Hooks API` 来管理状态和生命周期。
以下是一个简单的函数组件的示例:
```
import React, { useState, useEffect } from 'react';
function FuncComponent(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times.</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
```
在上面的示例中,使用 `useState` 来创建一个名为 `count` 的状态变量,并使用 `setCount` 来更新状态。`useEffect` 用于在每次 `count` 发生变化时更新页面标题。最后,该组件返回一个包含计数器和按钮的 div 元素。
相关问题
react函数组件使用useImperativeHandle
useImperativeHandle是React Hooks中的一个API,它可以让你在函数组件中暴露出自定义的方法给父组件调用。使用useImperativeHandle需要传入两个参数,第一个参数是一个ref对象,第二个参数是一个函数,这个函数返回一个对象,这个对象中的属性和方法会被暴露给父组件。在子组件中,需要使用forwardRef函数来包裹子组件,并将ref对象传递给子组件。下面是一个使用useImperativeHandle的例子:
```
import React, { forwardRef, useImperativeHandle } from 'react';
const Child = forwardRef((props, ref) => {
const handleClick = () => {
console.log('Child component is clicked');
};
useImperativeHandle(ref, () => ({
handleClick,
}));
return <button onClick={handleClick}>Click me</button>;
});
const Parent = () => {
const childRef = useRef(null);
const handleChildClick = () => {
childRef.current.handleClick();
};
return (
<>
<Child ref={childRef} />
<button onClick={handleChildClick}>Click child component</button>
</>
);
};
```
在上面的例子中,Child组件中的handleClick方法被暴露给了Parent组件,Parent组件可以通过childRef.current.handleClick()来调用Child组件中的handleClick方法。
react函数组件使用mobx
要在 React 函数组件中使用 MobX,需要使用 `observer` 函数将组件包装起来,以便 MobX 能够追踪组件状态的变化。
首先,需要在组件文件中引入 `observer` 和 `useObserver`:
```javascript
import { observer, useObserver } from "mobx-react-lite";
```
然后,将组件包装起来:
```javascript
const MyComponent = observer(() => {
// 组件代码
});
```
在组件内部使用 `useObserver`,可以让 MobX 追踪到组件状态的变化并重新渲染组件:
```javascript
const MyComponent = observer(() => {
const { store } = useStore(); // 获取 MobX Store
return useObserver(() => (
<div>
<h1>{store.title}</h1>
<button onClick={() => store.changeTitle("New Title")}>Change Title</button>
</div>
));
});
```
其中,`useStore` 是一个自定义的 Hook,用于获取 MobX Store。在组件内部使用 `useObserver` 包裹需要追踪的状态,这里是 `store.title`。当 `store.title` 发生变化时,组件会自动重新渲染。