React & 解释常见的 hooks: useState / useRef / useContext / useReducer

前言

如果对 re-render 概念还不清楚，建议先看 React & 理解 re-render 的作用、概念，并提供详细的例子解释 再回头看本文。

如果对 React 基础语法还不熟练，建议先看 React & JSX 日常用法与基本原则 再回头看本文。

useState

useState 可以用来声明响应式数据。

使用案例：

import ReactDOM from 'react-dom/client';
import {
   
    useState } from 'react';
const root = ReactDOM.createRoot(document.getElementById("root"));
const App = () => {
   
   
  const [name, setName] = useState('Jack')
  return <>
    <div>My name is {
   
   name}</div>
    <button onClick={
   
   () => setName('John')}>Change my name</button>
  </>
}
root.render(
  <App />
);

效果：

注意，state 更新采用异步执行 re-render，因此控制台打印的值仍然是旧的。

若希望能够在 state 变更后马上拿到最新的值，有两种方案：

1. 使用临时变量存储要变更的值：

// ...
const onChangeName = () => {
   
   
  const tempName = 'John'
   setName(tempName)
   console.log('My current name is', tempName)
 }
// ...

2. 使用 useRef，下面会讲。

useRef

useRef 也是声明响应式数据的一种方式，与 useState 不同的是，它可以不受 re-render 的约束，在更新数据后能立刻访问最新的值。

使用案例：

import ReactDOM from 'react-dom/client';
import {
   
    useRef } from 'react';