React学习day02-React事件绑定、组件、useState、React组件样式处理方式

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）为按钮绑定事件处理函数，实现变量自增

        

        

        4）效果

6、React组件样式处理方式

（1）行内样式

（2）class类名控制（属性名必须为className）

        1）语法：

        ①创建css文件，写入需要的样式

        ②导入样式文件

        ③使用