State变量 & 渲染和提交
- [State 变量](#State 变量)
-
- [state 变量的使用](#state 变量的使用)
- [State 是隔离且私有的](#State 是隔离且私有的)
- 组件渲染
State 变量
state 变量的使用
- 导入
useState
js
import { useState } from 'react';
- 定义一个 state 变量
js
const [index, setIndex] = useState(0);
useState 的唯一参数是 state 变量的初始值
在这个例子中,index 的初始值被 useState(0) 设置为 0
- 调用 setter 函数修改变量
js
function handleClick() {
setIndex(index + 1);
}
state setter 函数 (setIndex) 可以更新 state 变量并触发 React 重新渲染组件
State 是隔离且私有的
State 是组件实例内部的状态。如果你渲染同一个组件两次,每个副本都会有完全隔离的 state,改变其中一个不会影响另一个。
组件渲染
- 初次渲染
当应用启动时,会触发初次渲染。React 会调用根组件,通过 render 函数 递归完成所有所需组件的渲染。
js
import Image from './Image.js';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
root.render(<Image />);
对于初次渲染, React 会使用 appendChild() DOM API 将其创建的所有 DOM 节点放在屏幕上。
- 状态更新时重新渲染
通过 set 函数 更新组件状态来触发重新渲染。React 会调用内部状态更新触发了渲染的函数组件。
对于重渲染, React 将应用最少的必要操作(在渲染时计算),以使得 DOM 与最新的渲染输出相互匹配。