03 组件学习1

组件化概念

与vue相同，将界面分成一些部分，分块维护，实现复用，

react把组件分为了函数组件和类组件

函数组件

// 函数组件的创建和渲染

// 创建
function Hello () {
  return <div>Hello</div>
}

// 渲染<Hello/> 或者<Hello></Hello>

function App () {
  return (
    <div className="App">
      <Hello />
      <Hello></Hello>
    </div>
  )
}

约定说明

1. 组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签
2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合

类组件

import React from "react"
// 类组件的创建和渲染

// 创建，组件名称首字母大写，必须要有返回值，不写就为null
class HelloComponent extends React.Component {
  render () {
    return <div>this is class Component</div>
  }
}

// 渲染<HelloComponent/> 或者<HelloComponent></HelloComponent>

function App () {
  return (
    <div className="App">
      <HelloComponent />
      <HelloComponent></HelloComponent>
    </div>
  )
}

export default App

约定说明

1. 类名称也必须以大写字母开头
2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
3. 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

事件绑定

• 语法
  on + 事件名称 = { 事件处理程序 } ，比如：<div onClick={ onClick }></div>
• 注意点
  react事件采用驼峰命名法，比如：onMouseEnter、onFocus

import React from "react"

function Hello () {
  const clickHandler = () => {
    console.log("hello 组件触发")
  }
  return <div onClick={clickHandler}>Hello</div>
}

class HelloComponent extends React.Component {
  // 事件回调函数(标准写法)
  clickHandler = () => {
    console.log("类组件事件触发")
  }
  render () {
    return <div onClick={this.clickHandler}>this is class Component</div>
  }
}

function App () {
  return (
    <div className="App">
      <Hello />
      <HelloComponent />
    </div>
  )
}

export default App

获取事件对象

function HelloF2 () {
  const clickHandler = (e) => {
    console.log(e)
    e.preventDefault()//阻止事件，当前表示阻止a链接跳走
    console.log("hello 组件触发")
  }
  return <div><a onClick={clickHandler} href="http://www.baidu.com">baidu</a></div>
}

传递额外参数

function HelloF3 () {
  const clickHandler = (msg) => {
    console.log(msg)
    console.log("hello 组件触发")
  }
  return <div><span onClick={() => clickHandler("hello, f2")} href="http://www.baidu.com">baidu</span></div>
}

function HelloF3 () {
  const clickHandler = (e,msg) => {
    console.log(e)
    console.log(msg)
    console.log("hello 组件触发")
  }
  return <div><span onClick={(e) => clickHandler(e,"hello, f2")} href="http://www.baidu.com">baidu</span></div>
}