React组件（入门）

目录

1.什么是组件？

2.函数组件： 

3.类组件： 

 4.函数组件的事件绑定

---

1.什么是组件？

         简单理解为一个项目就像一个房子，由很多块砖垒起，这些砖块就可以称为组件。

     

2.函数组件： 

        1）函数组件概念：使用 JS 的函数（或箭头函数）创建的组件，就叫做函数组件

        2）组件定义与渲染 ：

// 定义函数组件
function HelloFn () {
  return <div>这是一个函数组件</div>
}

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}
export default App

         3）约定：       

                1- 组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签

                2- 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

                3- 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容

                4- 使用函数名称作为组件标签名称，可以成对出现也可以自闭合

3.类组件： 

        1）类组件概念：使用 ES6 的 class 创建的组件，叫做类（class）组件 

        2）组件定义与渲染：

// 引入React
import React from 'react'

// 定义类组件
class HelloC extends React.Component {
  render () {
    return <div>这是一个类组件</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <HelloC />
      <HelloC></HelloC>
    </div>
  )
}
export default App

         3）约定说明：

                1- 类名称也必须以大写字母开头

                2- 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性

                3- 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

 4.函数组件的事件绑定

        1） 如何绑定事件

                1- 语法：on + 事件名称 = { 事件处理程序 } 。例：<div onClick={ onClick }></div>

                2- 注意点: react事件采用驼峰命名法。例：onMouseEnter、onFocus

                3- 例：

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = () => {
    console.log('事件被触发了')
  }
  return (
    // 绑定事件
    <button onClick={clickHandler}>快点我!</button>
  )
}

        2）获取事件对象 

                注：获取事件对象e只需要在 事件的回调函数中 补充一个形参e即可拿到

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e) => {
    console.log('事件被触发了', e)
  }
  return (
    // 绑定事件
    <button onClick={clickHandler}>快点我!</button>
  )
}

         3）传递额外参数

                思路: 改造事件绑定为箭头函数 在箭头函数中完成参数的传递

import React from "react"

// 如何获取额外的参数？
// onClick={ onDel } -> onClick={ () => onDel(id) }
// 注意: 一定不要在模板中写出函数调用的代码 onClick = { onDel(id) }  bad!!!!!!

const TestComponent = () => {
  const list = [
    {
      id: 1001,
      name: 'react'
    },
    {
      id: 1002,
      name: 'vue'
    }
  ]
  const onDel = (e, id) => {
    console.log(e, id)
  }
  return (
      <ul>
        {list.map(item =>（
           <li key={item.id}>
                {item.name}
                <button onClick={(e) => onDel(e, item.id)}>x</button>
           </li>
        ))}
      </ul>
  )
}

function App () {
  return (
    <div>
      <TestComponent />
    </div>
  )
}

export default App

        4）类组件的事件绑定

// 类组件中的事件绑定
// 整体的套路都是一致的 和函数组件没有太多不同
// 唯一需要注意的 因为处于class 类环境下 所以定义事件回调函数 以及 绑定它写法上有不同
// 定义的时候: class Fields语法  
// 使用的时候: 需要借助this关键词获取

// 注意事项: 之所以要采取class Fields写法是为了保证this的指向正确 永远指向当前的组件实例

import React from "react"
class CComponent extends React.Component {
  // class Fields
  clickHandler = (e, num) => {
    // 这里的this指向的是正确的当前的组件实例对象 
    // 可以非常方便的通过this关键词拿到组件实例身上的其他属性或者方法
    console.log(this)
  }

  clickHandler1 () {
    // 这里的this 不指向当前的组件实例对象  undefined 存在this丢失问题
    console.log(this)
  }

  render () {
    return (
      <div>
        <button onClick={(e) => this.clickHandler(e, '123')}>点我</button>
        <button onClick={this.clickHandler1}>点我</button>
      </div>
    )
  }
}

function App () {
  return (
    <div>
      <CComponent />
    </div>
  )
}

export default App

文章推荐：

        1.创建React项目(入门保姆级）

        2.JSX基础（入门） 

        3.Cookie和Session 

        4.CSS：弹性盒子布局 display: flex ； 

        5.async/await， 搭配 promise使用