React组件基础

react组件

组件就是一个页面中的部分功能，多个组件实现完整的页面功能

特点：可复用、独立、可组合

react组件的创建

• 使用函数创建组件

  • 函数名称必须以大写字母开头

  • 函数必须有返回值（返回值为null时，表示不渲染任何内容）

// 使用函数创建组件
function Hello() {
  return (
    <div>Hello 组件！</div>
  )
}
ReactDOM.render(<Hello />, document.getElementById('root'))

使用类创建组件

• 类名称也必须大写开头

• 类组件必须继承 React.component 父类，才可以使用父类中提供的方法和属性

• 类组件必须提供 render 方法

• render 方法必须要有返回值，表示组价的结构

// 使用类创建组件
class Hello extends React.Component{
  render() {
    return <div>类创建组件！</div>
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'))

抽离组件为单独 JS文件

• 创建 Hello.js 文件

• 在 Hello.js 中导入 React

• 创建组件

• 导出这个组件

• 在index.js导入Hello 组件

• 渲染组件

//Hello.js
import React from 'react'

class Hello extends React.Component {
  render() {
    return (<div>Hello!</div>)
  }
}

export default Hello


//index.js
// 导入Hello 组件
import Hello from './JS/Hello.js'
ReactDOM.render(<Hello />, document.getElementById('root'))

React事件处理

• 事件绑定

  • 语法：on + 事件名称 = {事件处理方法} --- onClick = {...}

  • React事件采用 驼峰命名法 -----onClick 、 onFocus

// 函数事件绑定
function Hello() {
  function handleClick() {
    console.log('点击成功');
  }
  return (
    <button onClick={handleClick}>点击按钮</button>
  )
}

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

• 事件对象

  • 通过事件处理程序的参数获取到事件对象

  • 不需要担心跨浏览器兼容性问题

// 事件处理
class Hello extends React.Component{
  handleClick(e) {
    // 阻止默认行为
    e.preventDefault()
    console.log('点击成功！');
  }
  render() {
    return <a href='www.baidu.com' onClick={this.handleClick}>点击</a>
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'))

组件状态

• 有状态组件（类）：负责页面交互，更新页面

• 无状态组件（函数）：静态结构的展示

• 状态（state): 状态即数据，是组件内部的私有数据，只能在组件内部使用

  • state 的值是对象，表示一个组件中可以有多个数据

  • 通过 this.state 来获取状态

// 组件状态
class Hello extends React.Component{
  // constructor() {
  //   super()

  //   // 初始化 state
  //   this.state = {
  //     count : 0
  //   }
  // }

  // 简化写法
  state = {
    count : 0  
  }

  render() {
    return (
      <div>
        <h1>计算机: { this.state.count }</h1>
      </div>
    )
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'))

• 修改状态（setState）

  • 语法：this.setState({...})

  • 注意：不能直接修改 state 中的值

  • setState作用：1.修改 State 2. 更新UI

  • 思想：数据驱动视图

class Hello extends React.Component{
  // constructor() {
  //   super()

  //   // 初始化 state
  //   this.state = {
  //     count : 0
  //   }
  // }

  // 简化写法
  state = {
    count : 0  
  }

  render() {
    return (
      <div>
        <h1>计算机: { this.state.count }</h1>
        <button onClick={() => {
          this.setState({
            count : this.state.count + 1
          })
        }}>+1</button>
      </div>
    )
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'))