> For the complete documentation index, see [llms.txt](https://gzqsjtu.gitbook.io/workspace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gzqsjtu.gitbook.io/workspace/react/used-hook.md).
# Hook
## useState
useState() returns an array with exactly two elements:
(1) Your current state value, (2) A method to update your state value.
useState() will replace the old state instead of merging.
```jsx
import React, { useState } from "react";
import Person from "./Person/Person";
const App = props => {
const [personState, setPersonState] = useState({
person: [
{ name: "Harry", age: 24 }
]
});
const [otherState, setOtherState] = useState("some other value");
const switchNameHandler = () => {
setPersonState({
person: [
{name: "Harry Lu", age: 25}
]
});·
};
return (
);
}
export default App;
```
## useEffect & useRef & useContext
useEffect: `componentDidMount · componentDidUpdate` `componentWillUnmount`
```jsx
import React, { useEffect, useRef, useContext } from 'react';
import AuthContext from '../../context/auth-context';
const cockpit = props => {
const toggleBtnRef = useRef(null);
const authContext = useContext(AuthContext);
useEffect(() => {
// Http request...
// same as componentDidMount and componentDidUpdate
// setTimeout(() => {
// alert('Saved data to cloud!');
// }, 1000);
toggleBtnRef.current.click();
return () => {
// clean-up code here
// same as componentWillUnmount
};
}, []); // only re-run the effect if the value inside changes
return (
);
}
ReactDOM.render(, document.getElementById("root"));
```
## Using the Effect Hook
```
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
```
`useEffect` lets us express different kinds of side effects after a component renders. Some effects might require cleanup so they return a function
```
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
```
#### Use Multiple Effects to Separate Concerns
[you can use the *State* Hook more than once](https://reactjs.org/docs/hooks-state.html#tip-using-multiple-state-variables), you can also use several effects. This lets us separate unrelated logic into different effects:
### Custom Hook
**A custom Hook is a JavaScript function whose name starts with ”`use`” and that may call other Hooks.**
```
import { useState, useEffect } from 'react';
function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
```
```
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
{props.friend.name}
);
}
```
## Class component to functional
## Hook Use
Only in top of react function. Not in conditional control language
react use linked list hooks to rank
```
const [name,setName] = useState('leo');
///
setName('Lily');
```
```
// Some code
// 进入 mounState 逻辑
function mountState(initialState) {
// 将新的 hook 对象追加进链表尾部
var hook = mountWorkInProgressHook();
// initialState 可以是一个回调，若是回调，则取回调执行后的值
if (typeof initialState === 'function') {
// $FlowFixMe: Flow doesn't like mixed types
initialState = initialState();
}
// 创建当前 hook 对象的更新队列，这一步主要是为了能够依序保留 dispatch
const queue = hook.queue = {
last: null,
dispatch: null,
lastRenderedReducer: basicStateReducer,
lastRenderedState: (initialState: any),
};
// 将 initialState 作为一个“记忆值”存下来
hook.memoizedState = hook.baseState = initialState;
// dispatch 是由上下文中一个叫 dispatchAction 的方法创建的，这里不必纠结这个方法具体做了什么
var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
// 返回目标数组，dispatch 其实就是示例中常常见到的 setXXX 这个函数，想不到吧？哈哈
return [hook.memoizedState, dispatch];
}
mountWorkInProgressHook :
function mountWorkInProgressHook() {
// 注意，单个 hook 是以对象的形式存在的
var hook = {
memoizedState: null,
baseState: null,
baseQueue: null,
queue: null,
next: null
};
if (workInProgressHook === null) {
// 这行代码每个 React 版本不太一样，但做的都是同一件事：将 hook 作为链表的头节点处理
firstWorkInProgressHook = workInProgressHook = hook;
} else {
// 若链表不为空，则将 hook 追加到链表尾部
workInProgressHook = workInProgressHook.next = hook;
}
// 返回当前的 hook
return workInProgressHook;
}
```
Update:
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gzqsjtu.gitbook.io/workspace/react/used-hook.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.