react中组件创建和事件处理

---

前言

今天我们一起看看react中是如何创建组件的，随后一起看下react中的事件相关的一些内容，通过了解这些来帮助我们了解其语法~

---

一、react组件

1. react组件介绍

组件特点：独立、可复用、可组合
React组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props ”），并返回用于描述页面展示内容的 React 元素
组件的实例就是调用组件函数返回的具体的“页面”对象

2. react组件创建方式

• 使用函数创建组件
  使用 JS 的函数（或箭头函数）创建的组件
  • 约定1：函数名称必须以大写字母开头
  • 约定2：函数组件必须有返回值，表示该组件的结构
  • 如果返回值为 null，表示不渲染任何内容

代码如下（示例）：

function Hello() {
  return (
    <div>这是我的第一个函数组件！</div>
  )
}

• 使用类创建组件
  使用 ES6 的 class 创建的组件
  • 约定1：类名称也必须以大写字母开头
  • 约定2：类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
  • 约定3：类组件必须提供 render() 方法
  • 约定4：render() 方法必须有返回值，表示该组件的结构

代码如下（示例）：

class World extends React.Component {
  render() {
    return <div>World Class Component!</div>
  }
}
ReactDOM.render(<World />, root)

二、react事件处理

1. 事件绑定

传统的HTML绑定

<button onclick="handleClick()">
  计数
</button>

React的绑定

<button onclick="{handleClick}">
  计数
</button>

• React 事件绑定语法与 DOM 事件语法相似
• 语法：on+事件名称={事件处理程序}，比如：onClick={() => {}}
• 注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus

在函数组件中绑定事件:
代码如下（示例）：

function App() {
  function handleClick() {
    console.log('单击事件触发了')
  }
  return (
    <button onClick={handleClick}>计数</button>
  )
}

在类组件中绑定事件：
代码如下（示例）：

class App extends React.Component {
  handleClick() {
    console.log('单击事件触发了')
  }
  render() {
    return (
      <button onClick={this.handleClick}>计数</button>
    )
  }
}

2. 事件对象

可以通过事件处理程序的参数获取到事件对象
React 中的事件对象叫做：合成事件(对象)
合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

代码如下（示例）：

function handleClick(e) {
  e.preventDefault()
  console.log('事件对象', e)
}
<a onClick={handleClick}>点我，不会跳转页面</a>

---

总结

Bad luck often brings good luck.