React04 State变量 & 组件渲染

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 与最新的渲染输出相互匹配。

相关推荐
珹洺32 分钟前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚5 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志6 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3926 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
GISer_Jing6 小时前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪6 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山6 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生6 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心6 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师6 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js