前端react入门day02-React中的事件绑定与组件
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有资助，请留下您的足迹）https://img-blog.csdnimg.cn/8e170afd7f0b4a05ac460df33e58c6ef.jpeg
目录
React中的事件绑定
React 底子事件绑定
使用事件对象参数
传递自定义参数
同时传递事件对象和自定义参数
React中的组件
组件是什么
React组件
useState
修改状态的规则
状态不可变
修改对象状态
组件的样式处理
classnames优化类名控制
React中的事件绑定
React 底子事件绑定
语法： on + 事件名称 = { 事件处理程序 } ，整体上遵循驼峰命名法 https://img-blog.csdnimg.cn/b78a97c75f4246f7a2602acd9c4da402.png 使用事件对象参数
语法：在事件回调函数中设置形参e
https://img-blog.csdnimg.cn/bffe1022b8194bdaac2f4bc999cfef5f.png
传递自定义参数
语法：事件绑定的位置改造 成箭头函数的写法 ，在执行clickHandler实际处理业务函数的时候传递实参 https://img-blog.csdnimg.cn/9a1b18c6cd794e6a91767a65b1c7b3fe.png 注意：不能直接写函数调用，这里事件绑定需要一个 函数引用 同时传递事件对象和自定义参数
语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应
https://img-blog.csdnimg.cn/d1dfafe7a21342729e51beb5ed043201.png
React中的组件
组件是什么
概念：一个组件就是用户界面的一部门，它可以有本身的逻辑和外观，组件之间可以相互嵌套，也可以复用多次
https://img-blog.csdnimg.cn/6c3ceb64f4eb4d5581fe902bc7bb1b43.png
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用
React组件
在React中，一个组件就是 首字母大写的函数 ，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件 当成标签书写 即可 https://img-blog.csdnimg.cn/adf37729807443eba18ec23734cece14.png https://img-blog.csdnimg.cn/f54068ff014640e9a3cc59b6786a0d38.png useState
useState 是一个 React Hook（函数），它允许我们向组件添加一个 状态变量 , 从而控制影响组件的渲染结果 https://img-blog.csdnimg.cn/d64a345e7cb345beb012e20d9ef1f3df.png 本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI 也会跟着变化 （数据驱动视图） https://img-blog.csdnimg.cn/f3f008d7e6a9480981f1ffaada5876ed.png // useState实现一个计数器按钮
import { useState } from 'react'
function App () {
// 1. 调用useState添加一个状态变量
// count 状态变量
// setCount 修改状态变量的方法
const = useState(0)
// 2. 点击事件回调
const handleClick = () => {
// 作用:
// 1. 用传入的新值修改count
// 2. 重新使用新的count渲染UI
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick}>{count}</button>
</div>
)
}
export default App修改状态的规则
状态不可变
在React中，状态被以为是只读的，我们应该始终 替换它而不是修改它， 直接修改状态不能引发视图更新 https://img-blog.csdnimg.cn/823102c12cd442b198e0061b12e418fd.png https://img-blog.csdnimg.cn/99e798555ce24151bebe829fb3a5c75c.png 修改对象状态
规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来举行修改
https://img-blog.csdnimg.cn/076cb05492b84d0ab019fae515ae7f17.png https://img-blog.csdnimg.cn/3823acacc3b3417fba6449a7b8a88e9e.png
直接修改原对象，不引发视图变化 调用set传入新对象用于修改 组件的样式处理
React组件底子的样式控制有俩种方式
1. 行内样式（不保举） https://img-blog.csdnimg.cn/943e143632084143bf77a952c967ef7b.png 2. class类名控制 https://img-blog.csdnimg.cn/c0253387c6374673ad3ac40850d758c0.png https://img-blog.csdnimg.cn/e9f386ccad5b43638c3e5034aa1efde2.png index.css App.js classnames优化类名控制
classnames是一个简单的JS库，可以非常方便的 通过条件动态控制class类名的表现 https://img-blog.csdnimg.cn/405db85c1cdf4832830640662ae7cfdf.png 现在的题目：字符串的拼接方式不够直观，也容易出错 https://img-blog.csdnimg.cn/3bd1ac6201fc408aaba22743da4268d0.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]