前端react入门day02-React中的事件绑定与组件
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)
(图片来源网络,侵删)
目录
React中的事件绑定
React 基础事件绑定
使用事件对象参数
传递自定义参数
(图片来源网络,侵删)
同时传递事件对象和自定义参数
React中的组件
组件是什么
React组件
useState
修改状态的规则
(图片来源网络,侵删)
状态不可变
修改对象状态
组件的样式处理
classnames优化类名控制
React中的事件绑定
React 基础事件绑定
语法: on + 事件名称 = { 事件处理程序 } ,整体上遵循驼峰命名法![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/b78a97c75f4246f7a2602acd9c4da402.png)
使用事件对象参数
语法:在事件回调函数中设置形参e
传递自定义参数
语法:事件绑定的位置改造 成箭头函数的写法 ,在执行clickHandler实际处理业务函数的时候传递实参![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/9a1b18c6cd794e6a91767a65b1c7b3fe.png)
同时传递事件对象和自定义参数
语法:在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应
React中的组件
组件是什么
概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用
React组件
在React中,一个组件就是 首字母大写的函数 ,内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件 当成标签书写 即可![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/adf37729807443eba18ec23734cece14.png)
![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/f54068ff014640e9a3cc59b6786a0d38.png)
useState
useState 是一个 React Hook(函数),它允许我们向组件添加一个 状态变量 , 从而控制影响组件的渲染结果![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/d64a345e7cb345beb012e20d9ef1f3df.png)
![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/f3f008d7e6a9480981f1ffaada5876ed.png)
// useState实现一个计数器按钮 import { useState } from 'react' function App () { // 1. 调用useState添加一个状态变量 // count 状态变量 // setCount 修改状态变量的方法 const [count, setCount] = useState(0) // 2. 点击事件回调 const handleClick = () => { // 作用: // 1. 用传入的新值修改count // 2. 重新使用新的count渲染UI setCount(count + 1) } return ( {count} ) } export default App
修改状态的规则
状态不可变
在React中,状态被认为是只读的,我们应该始终 替换它而不是修改它, 直接修改状态不能引发视图更新![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/823102c12cd442b198e0061b12e418fd.png)
![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/99e798555ce24151bebe829fb3a5c75c.png)
修改对象状态
规则:对于对象类型的状态变量,应该始终传给set方法一个全新的对象来进行修改
直接修改原对象,不引发视图变化 调用set传入新对象用于修改组件的样式处理
React组件基础的样式控制有俩种方式
1. 行内样式(不推荐)![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/943e143632084143bf77a952c967ef7b.png)
![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/c0253387c6374673ad3ac40850d758c0.png)
![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/e9f386ccad5b43638c3e5034aa1efde2.png)
classnames优化类名控制
classnames是一个简单的JS库,可以非常方便的 通过条件动态控制class类名的显示![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/405db85c1cdf4832830640662ae7cfdf.png)
![前端react入门day02-React中的事件绑定与组件](https://img-blog.csdnimg.cn/3bd1ac6201fc408aaba22743da4268d0.png)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...