Loading... # react学习-组件和事件绑定（三） ## 一、函数组件 > 使用 JS 的函数（或箭头函数）创建的组件，就叫做`函数组件` ```js // 箭头函数 const Hello = () => { return ( <p>hello</p> ) } // 普通函数 function Hi () { return ( <p>Hi</p> ) } function App () { return ( <div className="App"> <Hello></Hello> <Hello /> <Hi></Hi> <Hi /> </div> ) } export default App ``` **注：** 1. 组件的名称**必须首字母大写**，react内部会根据这个来判断是组件还是普通的 HTML 标签 2. 函数组件**必须有返回值**，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null 3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的**返回值**就是对应的内容 4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合 ## 二、类组件 ```js import React from "react" class Hello extends React.Component { render () { return ( <p>hello</p> ) } } function App () { return ( <div className="App"> <Hello /> </div> ) } export default App ``` **注：** 1. **类名称也必须以大写字母开头** 2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性 3. 类组件必须提供 render 方法 **render 方法必须有返回值，表示该组件的 UI 结构** ## 三、事件绑定 - 语法 on + 事件名称 = { 事件处理程序 } ，比如：`<div onClick={()=>{}}></div>` - 注意点 react事件采用驼峰命名法，比如：onMouseEnter、onFocus 例： ```js import React from "react" // 函数组件 const Add = () => { const add = () => { console.log('函数组件的Add') } return ( <button onClick={add}>add</button> ) } // 类组件 class Reduce extends React.Component { reduce = () => { console.log('类组件中的reduce') } render () { return ( <button onClick={this.reduce}>reduce</button> ) } } function App () { return ( <div className="App"> <Add /> <Reduce /> </div> ) } export default App ``` **传参** + 获取事件对象 ```js const Hello = () => { const click = (e) => { console.log(e) } return ( <p onClick={click}>hello</p> ) } ``` + 传递自定义参数 ```js const Hello = () => { const click = (name) => { console.log(name) } return ( <p onClick={() => click('xxhzm')}>hello</p> ) } ``` + 传递自定义参数并获取事件对象 ```js const Hello = () => { const click = (e, name) => { console.log(e) } return ( <p onClick={(e) => click(e, 'xxhzm')}>hello</p> ) } ``` ## 四、组件状态 > 在react hook出来之前，函数式组件是没有自己的状态的 **1. 初始化状态** ```js class Counter extends React.Component { // 初始化状态 state = { count: 0 } render() { return <button>button</button> } } ``` **2. 读取状态** + 通过this.state来获取状态 ```js class Counter extends React.Component { // 初始化状态 state = { count: 0 } render () { return ( <p>count{this.state.count}</p> ) } } ``` **3. 修改状态** - 语法 `this.setState({ 要修改的部分数据 })` - setState方法作用 1. 修改state中的数据状态 2. 更新UI - 思想 数据驱动视图，也就是只要修改数据状态，那么页面就会自动刷新，无需手动操作dom - 注意事项 **不要直接修改state中的值，必须通过setState方法进行修改** ```js class Counter extends React.Component { // 定义组件状态 state = { count: 0 } countAdd = () => { this.setState({ count: '10' }) } // DOM 结构 render () { return ( <div> <p>count{this.state.count}</p> <button onClick={() => this.countAdd()}>button</button> </div> ) } } ``` **计数器案例** ```js import React from 'react' class Counter extends React.Component { // 定义组件状态 state = { count: 0 } add = () => { this.setState({ count: this.state.count + 1 }) } reduce = () => { this.setState({ count: this.state.count - 1 }) } // DOM 结构 render () { return ( <div> <p>{this.state.count}</p> <button onClick={() => this.add()}>add</button> <button onClick={() => this.reduce()}>reduce</button> </div> ) } } function App () { return ( <div className="App"> <Counter /> </div> ) } export default App ```  猜你想看 tcping不是windows默认命令， tcping怎么安装？ 给网站更换HarmonySanc字体 PHP+Vue实现留言板功能 PHP发送TCP和UDP请求 记录一下Nginx跨域处理 每日一学：PHP 中的array_intersect_ukey函数详解 kgm格式转换为mp3 2022年12月9日宝塔严重未知安全性漏洞 Vue侦听器 PHP输出99乘法表 最后修改：2022 年 06 月 20 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
1 条评论
te