React Native 的function组件没有像class组件那样的生命周期，但是在React 16.8版本以及之后，引入了Hooks，包含一些可以在function组件中使用的生命周期函数。
具体来说，Hooks提供的三个常见的生命周期函数是:
- useEffect：在组件首次渲染和组件状态更新时都会执行，类似于componentDidMount和componentDidUpdate的组合。
- useState：用于在function组件中管理状态。
- useContext：用于在function组件中使用React Context API。
下面将分别介绍一下:
useEffect
useEffect是React生命周期中较常用的函数之一，作用是执行副作用操作，副作用操作指那些改变了组件外部环境的操作，如异步请求数据、修改全局变量等。
useEffect的用法：
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 类似于 componentDidMount 和 componentDidUpdate
useEffect(() => {
// 在每次组件更新时更新文档标题
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
// 不传入任何参数时，这个函数的行为类似 componentDidMount
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useState
useState是另一个常见的React生命周期用法。它用于在function组件中保存和更新状态。useState的语法如下：
const [state, setState] = useState(initialState);
其中，state是保存的状态对象，setState用于更新状态。useState返回一个数组，第一个元素是当前状态值，第二个元素是更新状态的函数。
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
return (
<div>
<p>You clicked {count} times</p>
<input
type="text"
value={text}
onChange={(event) => setText(event.target.value)}
/>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useContext
useContext用于在function组件中使用React Context API。React Context API允许我们在组件树中共享数据而无需一级级地将props向下传递。
useContext的用法：
import React, { useContext } from 'react';
const MyContext = React.createContext(defaultValue);
function MyComponent() {
const value = useContext(MyContext);
return <p>{value}</p>;
}
import React, { useContext } from 'react';
const UserContext = React.createContext({
name: 'Guest'
});
function App() {
return (
<UserContext.Provider value=>
<Welcome />
</UserContext.Provider>
);
}
function Welcome() {
const user = useContext(UserContext);
return <h1>Welcome, {user.name}!</h1>;
}
