3、React事件绑定(以点击事件为例)
(1)语法(整体遵循驼峰命名法):on+事件名称={事件处理程序}
比如:点击事件onClick(类似于vue中的@click)
(2)传参
1)传递事件对象参数
①语法:在事件回调函数中设置形参e
②示例:
2)传递自定义参数(不能直接写函数调用,这里的事件绑定需要一个函数引用)
①语法:事件绑定的位置改造成箭头函数的写法,在执行事件处理函数时传参
②示例:
3)传递事件对象和自定义参数
①语法:在事件绑定的位置传递事件对象e和自定义参数,在事件处理函数中声明形参,但要注意顺序对应
②示例:
4、组件
(1)概念:一个组件就是用户页面的一部分,它有自己的逻辑和外观,组件之间也可以互相嵌套,也可以复用多次
(2)作用:利于组件化开发
(组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用)
(3)React组件
1)概念:在React中,一个组件就是首字母大写的函数。(它内部存放了组件的逻辑和视图UI,渲染组件只需将组件当成标签书写即可)
①定义组件
②使用组件
5、useState(一个React Hook函数)
(1)作用:允许我们向组件添加一个状态变量,从而控制影响组件的渲染结果
(2)与普通JS的区别:状态变量一旦发生变化,视图也会发生变化(数据驱动视图)
(3)语法:
const [状态变量,set函数]=useState(状态变量的初始值)
(set函数用来修改状态变量)
(4)修改状态的规则
1)状态不可变
在React中,状态被认为是只读的,我们应该始终替换它,而不是修改它,直接接修改状态,不能引发视图更新
2)对象状态修改:应该始终传给set方法一个全新的对象进行修改
(5)useState使用示例
(假设要使count实现点击自增1)
1)导入react中的useState
2)使用useState为变量count赋初始值
3)为按钮绑定事件处理函数,实现变量自增