免费推广网站大全下载安装网站关键词堆砌

免费推广网站大全下载安装,网站关键词堆砌,宣传 网站建设和政务公开,促销活动推广语言从 React Todos 中 学习组件通信机制 #x1f3af; 嗨#xff0c;各位前端小伙伴#xff5e; 今天咱们不聊虚的#xff0c;直接拿一个实实在在的「React 待办清单」项目开刀#xff0c;聊聊 React 里最核心的组件通信那些事儿。毕竟#xff0c;学 React 不学组件通信嗨各位前端小伙伴 今天咱们不聊虚的直接拿一个实实在在的「React 待办清单」项目开刀聊聊 React 里最核心的组件通信那些事儿。毕竟学 React 不学组件通信就像学做饭不学开火 —— 根本玩不转啊一、项目介绍 先给大家亮亮家底这个「React Todos」项目别看小五脏俱全能添加待办事项比如「今晚打游戏」、「明天写博客」能勾选完成状态打勾的那一刻成就感爆棚有没有能删除不需要的待办手滑写错了删就完事儿了能统计总数、未完成和已完成数量清清楚楚明明白白能一键清空已完成清理战场清爽还能把数据存在本地刷新页面重启浏览器待办还在安全感拉满技术嘛也是当下流行的vite react stylus。vite 负责快速启动和热更新再也不用等 webpack 慢悠悠打包了react 负责组件化和状态管理stylus 让写 CSS 像写代码一样爽不用写大括号和分号懒人福音。二、准备工作 ️想亲手试试这个项目安排步骤简单到不行打开终端敲npm init vitevite 脚手架快得飞起给项目起个名比如todos简单直接好记框架选react咱们今天的主角语言选javascript基础易上手进入项目目录执行npm i安装依赖等着它跑完就行喝口水的功夫最后npm run dev启动项目齐活三、从三个角度吃透组件通信 在 React 里组件就像一个个独立的小零件要让它们协同工作就得靠「通信」。而通信的核心其实就是「数据」的传递和修改 —— 毕竟组件们忙活半天本质上都是在跟数据打交道。先看根组件App.jsx里的状态定义javascript运行// App.jsx const [todos, setTodos] useState(() { // 从localStorage读取数据实现刷新不丢失 const saved localStorage.getItem(todos); return saved ? JSON.parse(saved) : []; });这里的todos就是整个应用的「核心数据」所有组件的通信几乎都是围绕它展开的。就像一个家庭的「共用冰箱」食材数据都存在这里全家人组件都要靠它吃饭1. 父组件 → 子组件我给你啥你就用啥 在咱们的项目里App是根组件大老板TodoInput、TodoList、TodoStats都是它的子组件小员工。父组件给子组件传数据靠的是「props」这个神奇的东西。举个栗子 比如App给TodoList传数据// App.jsx 中使用 TodoList TodoList todos{todos} // 传递待办列表数据 onDelete{deleteTodo} // 传递删除方法 onToggle{tooggleTodo} // 传递切换状态方法 /子组件TodoList接收并使用这些 props// TodoList.jsx const TodoList (props) { // 从props中解构出需要的东西 const { todos, onDelete, onToggle } props; return ( ul classNametodo-list {todos.map(todo ( // 直接使用todos数据渲染列表 li key{todo.id} className{todo.completed ? completed : } label input typecheckbox checked{todo.completed} // 使用todo的completed状态 onChange{() onToggle(todo.id)} // 调用父组件传的onToggle方法 / span{todo.text}/span // 使用todo的文本内容 /label button onClick{() onDelete(todo.id)}X/button // 调用父组件传的onDelete方法 /li ))} /ul ) }本质揭秘 ️父组件通过 props 给子组件传的「值」可不止是数据还能是方法、甚至其他组件就像爸爸给孩子零花钱数据、给孩子一把家门钥匙方法用来开门 / 修改数据—— 孩子能花钱、能开门但不能直接改爸爸的工资卡props 是只读的。React 严格遵循「单向数据流」数据从父到子一层一层往下传。子组件只能用 props不能直接改 props。这样做的好处是「数据流向可追踪」出了问题能快速定位 —— 就像快递物流从卖家父到买家子每一步都有记录丢了件也好查2. 子组件 → 父组件有事您说话我喊您处理 子组件不能直接改父组件的数据单向数据流规定的那子组件想修改数据咋办比如TodoInput输入了新的待办内容总不能自己偷偷加到todos里吧这时候就得用「回调函数」大法了父组件提前把「修改数据的方法」通过 props 传给子组件子组件需要修改时调用这个方法就行。举个栗子 父组件App定义添加待办的方法并传给TodoInput// App.jsx const addTodo (text) { // 往todos里加新待办 setTodos([...todos, { id: Date.now(), // 用时间戳当唯一ID简单粗暴 text: text, completed: false // 刚添加的肯定是未完成状态 }]); }; // 传给子组件 TodoInput TodoInput onAdd{addTodo} /子组件TodoInput接收方法在合适的时机调用// TodoInput.jsx const TodoInput (props) { const { onAdd } props; // 接收父组件的onAdd方法 const [inputValue, setInputValue] useState(); // 本地维护输入框状态 const handleSubmit (e) { e.preventDefault(); // 阻止表单默认提交 if (inputValue.trim() ) return; // 空内容不提交避免无效数据 onAdd(inputValue); // 调用父组件的方法把输入的文本传过去 setInputValue(); // 清空输入框用户体验up } return ( form classNametodo-input onSubmit{handleSubmit} input typetext value{inputValue} onChange{e setInputValue(e.target.value)} // 实时更新输入框状态 / button typesubmitAdd/button /form ) }本质揭秘 ️子传父的核心就是「父给方法子调方法传数据」。就像孩子想要买玩具修改数据不能直接从爸爸钱包里拿钱改父组件状态但可以跟爸爸说「我想要这个玩具」调用回调函数传数据爸爸听到后自己掏钱买父组件自己修改状态。既满足了需求又遵守了「规矩」3. 兄弟组件通信有事找爸爸转达 ‍‍‍TodoInput、TodoList、TodoStats这三个组件是「兄弟关系」—— 它们的爸爸都是App。兄弟之间想通信咋办比如TodoInput新增了一个待办TodoList要显示新内容TodoStats要更新统计数字。React 里兄弟组件不能直接聊天得靠「爸爸当中间人」结合「子传父」和「父传子」让爸爸来转发消息。举个栗子 爸爸App持有共享数据todos和修改方法addTodo、deleteTodo等TodoInput哥哥通过onAdd把新待办传给爸爸子传父爸爸更新todos状态爸爸把最新的todos传给TodoList弟弟和TodoStats妹妹父传子弟弟和妹妹拿到新数据重新渲染实现了「间接通信」。看TodoStats组件的代码就明白了// TodoStats.jsx const TodoStats (props) { const { todos, active, completed, onClearCompleted } props; return ( div classNametodo-stats pTotal: {todos} | Active: {active} | Completed: {completed}/p {completed 0 ( button classNameclear-btn onClick{onClearCompleted} Clear Completed /button )} /div ) }它展示的todos总数、active未完成数、completed已完成数都是爸爸App计算好传过来的。当TodoList里勾选了一个待办调用onToggle改了todos爸爸会重新计算active和completed然后传给TodoStats于是统计数字就自动更新了 —— 这就是兄弟通信的精髓本质揭秘 ️兄弟通信就像两个小朋友隔着房间聊天哥哥TodoInput喊爸爸App「我放了个苹果在冰箱里」爸爸听到后更新冰箱todos然后告诉妹妹TodoStats「冰箱里多了个苹果现在总数是 5 个啦」。虽然兄弟没直接说话但靠爸爸转达信息照样同步四、数据持久化localStorage 来帮忙 咱们的待办列表刷新页面后数据还在这是咋做到的秘密就在localStorage—— 浏览器提供的本地存储功能能把数据存在用户的电脑里关掉浏览器也不丢。1.不好的做法 ❌很多新手可能会想到在每个修改todos的方法里都手动存一次数据。比如// 不好的示例重复代码太多 const addTodo (text) { const newTodos [...todos, { id: Date.now(), text, completed: false }]; setTodos(newTodos); localStorage.setItem(todos, JSON.stringify(newTodos)); // 手动存 }; const deleteTodo (id) { const newTodos todos.filter(todo todo.id ! id); setTodos(newTodos); localStorage.setItem(todos, JSON.stringify(newTodos)); // 又存一次 };这写法的缺点太明显了重复代码多每次改数据都要写一遍localStorage.setItem、容易漏万一新增了一个修改方法忘了存数据就丢了。简直就像每次吃完零食都要手动写一遍账本麻烦还容易错2.聪明的做法 ✅用 React 的useEffect钩子它能监听todos的变化只要todos变了就自动存到localStorage里。一次写好终身受益// App.jsx useEffect(() { // 当todos变化时自动存到localStorage localStorage.setItem(todos, JSON.stringify(todos)); }, [todos]); // 依赖数组只有todos变了才会执行上面的代码useEffect第一个参数是「副作用函数」这里就是存数据的操作第二个参数[todos]是「依赖数组」只有当todos发生变化时才会执行副作用函数。这就像给冰箱装了个自动记账器 —— 不管是加了苹果addTodo、扔了香蕉deleteTodo还是把草莓标成「已吃」onToggle只要冰箱里的东西变了记账器就自动更新账本localStorage省心效果展示五、面试官可能会问这些 学完这个项目面试官再问 React 组件通信你就可以自信回答了React 单向数据流有啥好处答数据流向清晰父→子容易调试知道谁改了数据避免数据混乱子组件不能乱改父组件数据。就像咱们项目里所有todos的修改都集中在App里出问题一查就准子组件想改父组件数据咋办答父组件定义回调函数通过 props 传给子组件子组件调用函数传数据。比如TodoInput用onAdd给App传新待办内容兄弟组件咋通信答通过父组件中转父组件存共享状态一个子组件改状态子传父父组件把新状态传给另一个子组件父传子。就像TodoInput新增待办TodoList和TodoStats自动更新useEffect 在项目里用在哪了作用是啥答用来监听todos变化自动同步到localStorage实现数据持久化。依赖数组[todos]保证了只有数据变了才会执行避免无效操作六、项目结构及效果展示 整个项目的代码结构特别清晰App.jsx核心组件管着todos状态和所有修改方法addTodo、deleteTodo等负责给子组件传数据和方法TodoInput.jsx负责输入新待办通过onAdd告诉爸爸TodoList.jsx负责展示待办列表通过onDelete和onToggle告诉爸爸要删还是要改TodoStats.jsx负责展示统计信息通过onClearCompleted告诉爸爸要清空已完成。每个组件各司其职靠通信协同工作完美体现了 React 组件化的思想奥还有我们的app.styl美化我们的界面。项目结构效果亮个相吧七、结语 看完这篇博客是不是觉得 React 组件通信也没那么难其实核心就三点父传子靠 props子传父靠回调兄弟通信靠爸爸中转。再加上useEffect管理副作用比如存数据一个小而美的 React 应用就成了记住多写代码多实践遇到问题看看组件之间的数据是咋传的慢慢就会有感觉啦下次再有人问你 React 组件通信直接把这个待办项目甩给他看 ——「喏都在这儿了」