react渲染与提交

公告

Posted on 2026-04-09 16:06 打杂滴阅读(19) 评论(0) 收藏举报

在 React 18 中，createRoot 是用于创建 React 根节点的函数，它允许你将 React 组件渲染到浏览器 DOM 节点中。

const root = createRoot(document.getElementById('root'))

root.render(<Gallery />);

第一步：const root = createRoot(document.getElementById('root'))
作用：
这行代码的作用是创建一个 React 根节点（root），并将该根节点与页面中的某个 DOM 元素关联起来。
document.getElementById('root') 获取了 HTML 中 id 为 root 的元素，这个元素通常是

<div id="root"></div>。
createRoot(domNode) 接收一个 DOM 节点作为参数，并返回一个包含 render 和 unmount 方法的对象。

第二步：root.render(<Gallery />)
作用：
这行代码的作用是将 React 组件 <Gallery /> 渲染到之前创建的根节点中。
render 方法会把 JSX（即 <Gallery />）转换成虚拟 DOM，并最终更新实际的 DOM 结构。

测试脚本如下

src/Gallery.js:

export default function Gallery() {

return (

<h1>鼓舞人心的雕塑</h1>

</section>

);

}

function Image() {

return (

<img

src="https://i.imgur.com/ZF6s192.jpg"

alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"

);

}

src/index.js:

import React from 'react';

import ReactDOM from 'react-dom/client';

import Gallery from './Gallery';

const root = ReactDOM.createRoot(document.getElementById('root88'));

root.render(

<React.StrictMode>

</React.StrictMode>

);

public/index.html:

<!DOCTYPE html>

<head>

<meta

name="description"

content="Web site created using create-react-app"

<title>React App</title>

</head>

</body>

</html>

在一个 React 应用中一次屏幕更新都会发生以下三个步骤：
触发:触发一次渲染
渲染:React 渲染你的组件
提交:React 把更改提交到 DOM 上

<!DOCTYPE html>

<head>

<title>React 渲染与提交学习实例</title>

</head>

const { useState, useEffect } = React;

// 学习记录项组件

const LearningItem = ({ item, onDelete, onEdit }) => {

const [isEditing, setIsEditing] = useState(false);

const [editValue, setEditValue] = useState(item.text);

const handleSave = () => {

if (editValue.trim()) {

onEdit(item.id, editValue);

setIsEditing(false);

}

};

return (

{isEditing ? (

<input

type="text"

value={editValue}

onChange={(e) => setEditValue(e.target.value)}

className="border-b-2 border-indigo-300 focus:border-indigo-500 outline-none pb-1 w-full"

autoFocus

<button

onClick={handleSave}

className="px-3 py-1 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 transition-colors"

保存

</button>

<button

onClick={() => setIsEditing(false)}

className="px-3 py-1 bg-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-400 transition-colors"

取消

</button>

</div>

) : (

<div>

{new Date(item.timestamp).toLocaleString('zh-CN')}

</p>

</div>

)}

</div>

{!isEditing && (

<button

onClick={() => setIsEditing(true)}

className="text-blue-500 hover:text-blue-700 transition-colors"

title="编辑"

</button>

<button

onClick={() => onDelete(item.id)}

className="text-red-500 hover:text-red-700 transition-colors"

title="删除"

</button>

</div>

)}

</div>

);

};

// 主应用组件

const App = () => {

const [inputValue, setInputValue] = useState('');

const [items, setItems] = useState([]);

const [filter, setFilter] = useState('all');

const [searchTerm, setSearchTerm] = useState('');

// 从本地存储加载数据

useEffect(() => {

const savedItems = localStorage.getItem('learningItems');

if (savedItems) {

setItems(JSON.parse(savedItems));

}

}, []);

// 保存数据到本地存储

useEffect(() => {

localStorage.setItem('learningItems', JSON.stringify(items));

}, [items]);

// 提交新学习记录

const handleSubmit = (e) => {

e.preventDefault();

if (inputValue.trim()) {

const newItem = {

id: Date.now(),

text: inputValue.trim(),

timestamp: new Date().toISOString()

};

setItems([newItem, ...items]);

setInputValue('');

}

};

// 删除学习记录

const handleDelete = (id) => {

setItems(items.filter(item => item.id !== id));

};

// 编辑学习记录

const handleEdit = (id, newText) => {

setItems(items.map(item =>

item.id === id ? {...item, text: newText} : item

));

};

// 清空所有记录

const handleClearAll = () => {

if (window.confirm('确定要清空所有学习记录吗？')) {

setItems([]);

}

};

// 过滤和搜索逻辑

const filteredItems = items.filter(item => {

const matchesSearch = item.text.toLowerCase().includes(searchTerm.toLowerCase());

return matchesSearch;

});

const completedCount = items.length;

const todayCount = items.filter(item =>

new Date(item.timestamp).toDateString() === new Date().toDateString()

).length;

return (

{/* 头部 */}

<i className="fas fa-book-reader mr-3"></i>学习记录系统

</h1>

<p className="text-gray-600">记录你的每一个学习瞬间</p>

</header>

{/* 统计卡片 */}

<div>

<p className="text-3xl font-bold">{completedCount}</p>

</div>

<div>

<p className="text-3xl font-bold">{todayCount}</p>

</div>

{/* 输入表单 */}

<div>

添加新的学习记录

</label>

<input

id="learningInput"

type="text"

value={inputValue}

onChange={(e) => setInputValue(e.target.value)}

placeholder="今天学到了什么？"

className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition-colors"

<button

type="submit"

disabled={!inputValue.trim()}

className={`px-6 py-3 rounded-xl font-semibold transition-all ${

inputValue.trim()

? 'bg-indigo-600 text-white hover:bg-indigo-700 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg'

: 'bg-gray-300 text-gray-500 cursor-not-allowed'

}`}

<i className="fas fa-plus-circle mr-2"></i>提交

</button>

</div>

</form>

</div>

{/* 控制面板 */}

<input

type="text"

value={searchTerm}

onChange={(e) => setSearchTerm(e.target.value)}

placeholder="查找学习记录..."

className="pl-10 pr-4 py-2 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:outline-none w-full md:w-64"

</div>

<button

onClick={handleClearAll}

disabled={items.length === 0}

className={`px-4 py-2 rounded-lg flex items-center ${

items.length > 0

? 'bg-red-500 text-white hover:bg-red-600'

: 'bg-gray-300 text-gray-500 cursor-not-allowed'

}`}

<i className="fas fa-trash-alt mr-2"></i>清空全部

</button>

</div>

{/* 学习记录列表 */}

<i className="fas fa-list mr-2"></i>学习记录列表

</h2>

共 {filteredItems.length} 条记录

</span>

</div>

{filteredItems.length === 0 ? (

<h3 className="text-xl font-medium text-gray-500 mb-2">暂无学习记录</h3>

{items.length === 0

? '开始添加你的第一条学习记录吧！'

: '没有找到匹配的记录'}

</p>

</div>

) : (

{filteredItems.map(item => (

<LearningItem

key={item.id}

item={item}

onDelete={handleDelete}

onEdit={handleEdit}

))}

</div>

)}

</div>

{/* 页脚 */}

</footer>

</div>

);

};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

</script>

</body>

</html>

刷新页面返回顶部

努力，奋斗

公告

react渲染与提交