函数组件和类组件

函数组件和类组件

函数注意点

1. 组件名称必须大写，react内部根据这个判断是组件还是普通HTML标签，驼峰加-写法自然不行了。
2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null。
3. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合。

const songs = [
    { id: 1, name: 'lcq' },
    { id: 2, name: 'lqj' },
    { id: 3, name: 'nsn' }
]
const flag = 'lcq'

function MapList () {
    return (
        <div className="Songs">
            <ul>
                {
                    songs.map(item => {
                        return flag === item.name ? <li key={item.id}>{item.name} 最帅 </li> : <li key={item.id}>{item.name}</li>
                    })
                }
            </ul>
        </div>
    )
}

export default MapList

类组件的注意点

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

//使用 ES6 的 class 创建的组件，叫做类（class）组件

import React from "react"

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

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

export default HelloC

类组件可以最终还是在函数组件中使用的。

事件的绑定

• 语法

  on + 事件名称 = { 事件处理程序 } ，比如：<div onClick={()=>{}}></div>

• 注意点

  react事件采用驼峰命名法，比如：onMouseEnter、onFocus

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

// 类组件
class HelloC extends React.Component {
  // 定义事件回调函数
  clickHandler = () => {
    console.log('事件被触发了')
  }
  render () {
    return (
      // 绑定事件
      <button onClick={this.clickHandler}>click me!</button>
    )
  }
}

在类组件中使用就需要this调用

获取事件对象e

  // 定义事件回调函数
  const clickHandler = (e) => {
    e.preventDefault()
    console.log('事件被触发了', e)
  }

区别

类组件：

• 有组件实例
• 有生命周期
• 有 state 和 setState

函数组件：

• 没有组件实例
• 没有生命周期
• 没有 state 和 setState，只有 props
• 不要更改 props