携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

1. react 组件介绍

• 组件是 react 的核心，使用 react 就是在用组件
• 页面中的各个部分都可以看做是一个组件
• 组合多个组件可以实现完整的页面功能
• 组件的特点：可复用、独立、可组合

2. react 组件的两种创建方式

2.1 使用函数创建组件

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

代码如下：

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

// 或箭头函数
// const Hello = () => <div>这是我的第一个函数组件</div>

ReactDOM.render(<Hello />,document.getElementById('root'))

2.2 使用类创建组件

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

代码如下：

// 类组件
class Hello extends React.Component{
  render(){
    return (
      <div>这是我的第一个类组件</div>
    )
  }
}

// 渲染组件
ReactDOM.render(<Hello />,document.getElementById('root'))

2.3 抽离为独立 JS 文件

• 思考：项目中的组件多了之后，该如何组织这些组件呢？
• 选择1：将所有组件放在同一个 JS 文件中
• 选择2：将每个组件放到单独的 JS 文件中
• 答案：组件作为一个独立的个体，一般都会放到一个单独的 JS 文件中

具体步骤如下：

1. 创建 Hello.js
2. 在 Hello.js 中导入 React
3. 创建组件（函数 或 类）
4. 在 Hello.js 中导出该组件
5. 在 index.js 中导入 Hello 组件
6. 渲染组件

Hello.js 文件

import React from 'react'

// 创建组件
class Hello extends React.Component {
    render(){
        return (
            <div>这是我的第一个抽离到js文件中的组件</div>
        )
    }
}

// 导出组件
export default Hello

index.js 文件

// 导入组件
import Hello from './Hello'

// 渲染组件
ReactDOM.render(<Hello />,document.getElementById('root'))

3. react 事件处理

3.1 事件绑定

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

在类组件中绑定事件

class App extends React.Component{
  // 事件处理程序
  handleClick(){
    alert('点击事件触发了')
  }

  render(){
    return (
      <button onClick={this.handleClick}>点我</button>
    )
  }
}

ReactDOM.render(<App />,document.getElementById('root'))

在函数组件中绑定事件

function App(){
   // 事件处理程序
   function handleClick(){
    alert('点击事件触发了')
  }

  return (
    <button onClick={handleClick}>点我</button>
  )
}

ReactDOM.render(<App />,document.getElementById('root'))

3.2 事件对象

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

// 事件对象
function App(){
  // 事件处理程序
  function handleClick(e){
    // 阻止浏览器的默认行为
    e.preventDefault()

    console.log('a标签的点击事件触发了')
 }

 return (
   <a href='http://www.baidu.com' onClick={handleClick}>点我，不会跳转页面</a>
 )
}

ReactDOM.render(<App />,document.getElementById('root'))

4. 有状态组件和无状态组件

• 函数组件又叫做无状态组件，类组件又叫做有状态组件
• 状态（state）即数据
• 函数组件没有自己的状态，只负责数据展示（静）
• 类组件有自己的状态，负责更新 UI ，让页面  "动" 起来

5. 组件中 state 和 setState()

5.1 state 的基本使用

• 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
• state 的值是对象，表示一个组件中可以有多个数据
• 获取状态：this.state

// state的基本使用
class App extends React.Component{
  // // 复杂语法初始化state
  // constructor(){
  //   super()
  //   // 初始化state
  //   this.state = {
  //     count: 0
  //   }
  // }

  // 简化语法初始化state（推荐）
  state = {
    count: 10
  }

  render(){
    return (
      <div>结果：{this.state.count}</div>
    )
  }
}

ReactDOM.render(<App />,document.getElementById('root'))

5.2 setState() 修改状态

• 状态是可变的
• 语法：this.setState({要修改的数据})
• 注意：不要直接修改 state 中的值，这是错误的！！！
• setState() 的作用：修改state、更新 UI
• 思想：数据驱动视图

class App extends React.Component{
  state = {
    count: 10
  }

  render(){
    return (
      <div>
        <span>结果：{this.state.count}</span>
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
        }}>+1</button>
      </div>
    )
  }
}

ReactDOM.render(<App />,document.getElementById('root'))